Archives for Category / The Information Layer

• The End of Project Ottawa

  Almost three months ago, prior to me attending the IxDA Interaction 13 conference, I decided to put the project on hiatus for two months.

  Well, that time has passed and I have come to the decision that this hiatus will be indefinite.

  At this point, I am leaving this somewhat open-ended because I do not know when I will come back to this, if at all. Some of the ideas here will return in different situations down the road. But as of now, no further work will be done and there will be no third draft. The previous version will still be online (see Second Draft) but no further revisions will be made in the near future.

  I want to thank everyone who helped me along the way, especially during the craziness of last year. Most importantly, I want to thank all those who let me bend their ears [constantly] about my ideas and gave me some much-needed advice. Right now, Ottawa is at a state where I cannot devote any more time and there are other projects that need my attention. In some respects, Ottawa may have been a solution in need of a problem and I suspect it may be a couple of years before it is fully understood.

  Thank you all,
  Ivan Wilson

  

• Happy Anniversary, Project Ottawa

  Last year, prior to going to Jonathan Snook ‘s inaugural SMACSS workshop in Ottawa, Canada, I was thinking. There was something that I was on my mind for the past year. Then, [place lightning description here], I got inspiration from looking at some of my old linear algebra books from college.

  What did I do next? I announced it on Twitter:

  Eureka! After months of chaos, finally able to think clearly. Now, it’s finally time to blow up my code. #linearalgebra #optics

  @iwilsonjr (12:10 AM · Feb 26, 2012) – https://twitter.com/iwilsonjr/status/173636146688040960

  I spent whatever free time, post-workshop, working on this in my [first] Moleskine notebook. The early sketches look more like algebra proofs that the visual model that exists today.

  

  However, these sketches and some rules that I wrote down became the basis of the project’s First Draft.

  

  And as they say the rest is history.

  Though currently on hiatus, I am planning a few more sketches and notes in the current year.

  Hopefully, this project will still be around for year two.

  Happy Anniversary, Project Ottawa!

• Building the Future, Day 1 – The Beginning

  Like all things, every story has a beginning. In this case, [Project] Ottawa started with the concept The Information Layer (2009). But what came before this?

  Well, it all started in Vancouver, Canada (February 2009) where I saw this film by BERG designer Timo Arnall:

  Wireless in the World 2 – https://vimeo.com/12187317

  In Wireless in the World, they were imagining wireless networks available in the surrounding environment. Now, this looks like an interesting film. But to me, it was a pretty eye-opening experience. You see, up until this time, I only viewed the Web as being static. That is, something that was only accessible from the comfort of a chair and a desktop computer.

  Step back for a moment. Now imagine all those dotted circles representing access points just like one of those desktop computers w/chairs. It would look funny at first but the main point is that each one of those access points is accessing data. They are accessing the same content I am through my desktop computer. If your concept of content is something that is seen through a desktop monitor, what does this do? The concept of having the same content available across all sorts of devices, being available at will – without the constraint of the standard web page format. Even without the author controlling how the information was displayed. The user now has the power not only to access the information but to display it in any fashion he/she wanted.

  That idea of information being free, not in the political sense but in accessibility, really changed how I worked. After that film and the lecture, I decided that my job as a front-end developer was not of creating layouts. My job became a person who tried to build products that allowed for easy access to information. Building the layout with excellent code was simply a means to an end. Improving upon the work simple meant improved access to information. Information, in my terms of my work, is equivalent to content.

  At this point, I was trying to find a way to explaining this way of thinking. It was only a few months later that I was looking at XSLT or XML transforms. Basically, it is a method of taking data in the form of a XML format and transforming into a format resembling a HTML web page. Well, XML is an open format, anyone can use it at will and modify the information to display it in any form they want. We have RSS feeds – XML format data streams that user can collect data and use. This is where all the dots began to connect. You see, XML or JSON, can carry content/information anywhere with the user applying the formatting.

  Going back to this point, I wrote some ideas and sketches which later became The Information Layer. What I realized was that the current UI model was not sufficient – it was simple not granular enough to fully describe what was happening at the time. One of the novel things I did was creating a separation of the Semantic (HTML) Layer from the Information (content) Layer. How important was this? It was very important because it depicted the free flow of information /content. It also displayed the fact that HTML has its own sense of meaning, which was further expanded with HTML5 semantic tags a few years later. This was not a new concept but was not fully realized until now.

  And so, that was the beginning. From here, I used this model for building my work.

  As I mentioned in an earlier blog entry, Project Ottawa is simply the first practical application of the model. This was revised recently to deal with the concept of content, which will be the main focus point of Project Ottawa/Third Draft.

• Revision of The Information Layer

  In February 2009, I went to my first IxDA [Interaction Design Association] Interaction conference in Vancouver, Canada.

  A few months later, I created a sketch, made in May 2009 that was translated to the following graphic.

  

  This model, which I call The Information Layer, has been the guiding force in my own work. It has helped me build some of the most successful sites in my career.

  To others, it may have been just a theoretical model, but it was built from observations. The observations I had about front-end work and interaction design ideas concerning mobile and data. And it has proven invaluable as a guide in trying to predict how things would turn out in the last couple of years.

  But the most important stage was reached this year when the first direct application was started – web application modeling or Project Ottawa. The project itself took The Information Layer and started the path that will eventually lead to a practical application.

  However, there is a flaw.

  For any model to work, you occasionally go back and test its parts to see what works and what doesn’t. That’s basically how Project Ottawa has been built and it is currently at its second draft (July 2012). But there was one thing that was bothering me – content. I had a better grasp of some of the other layers, but the lowest level of the model (Information Layer) was never really fleshed out. It was more of a “hand-waving” nod to content. There was really no fully defined description of this layer. In the end, it was treated just like the other layers in the model, out of consistency.

  But it couldn’t. And those flaws where shown in August and September.

  It started with a Karen McGrane lecture at the An Event Apart conference in August. She pointed out a model from the White House digital directive where they had a content model better than my own. After the initial shock, I decided that their model was better and made a revision to The Information Layer to be broken down into three parts – API, Metadata, and Content. In the end, this solves some of the weaknesses in the current Information Layer model.

  

  The other part was some of the feedback from a presentation I gave at Mobile UXCamp DC 2012 in September of Project Ottawa. One of the most important criticisms was that there was little in terms of how changes in content could affect not only a single view/template but also the whole system/application. Likewise, what would happen in the reverse direction – if a change in an application affects content (i.e. responsive design).

  So, after a hiatus of two months, I am back at work on Project Ottawa. But this same change meant that the focus on Ottawa will be on building the area that has been its weakness so far – content. With some thought during the hiatus, I have a possible solution that I will introduce next year (1/2/2013) called Content Mapping. At this point, I have only a few sketches (scans from Ottawa skectch/notebook) but I am creating a more refined demo.

  But this also means the following:

  1. I am now starting to work on the Third Draft, for 2013 as planned and
  2. Project Ottawa will not longer be one model but a collection of integrated models along the blueprint analogy. Each model visualizes each aspect of a web application’s structure and interactions.

  And so, the work begins again and Project Ottawa will be going on past its first anniversary in March.

  Later.

• Project Ottawa, Second Draft

  Now available at https://thewilsonproject.com/ottawa/.

  Will be making further revisions/additions in the coming weeks.

  For Comments/Feedback

• What is Project Ottawa?

  a method of building a visual model of an web application UI/front-end layer

  During the past four months, I have been presenting previews of sketches and notes from my notebook via Flickr.

  Preview Sketches:

  • Previews – Project Ottawa/Second Draft
  • Previews – Project Ottawa/Second Draft (Modeling Example)
  • Previews – Project Ottawa/First Draft

  Project Ottawa [or the Ottawa model/diagrams] started in late February, prior to my trip to Ottawa for Jonathan Snook’s SMACSS Workshop. It was there that I did the first initial sketches post-workshop and a few weeks later, created the first draft.

  After some review and criticism from a fellow co-worker, I decided to work on the second draft. This took more twice as much time as the first, with testing and constant revisions. However, at this point, I am writing the final pages and presenting the Second Draft as a microsite in early/mid July.

  The Model

  In short, the model is based on a) recent work on modularizing CSS (via Nicole Sullivan, Jonathan Snook and etc), b) analog to linear algebra, most specifically linear transforms, and c) my ideas on the UI layer, based on a concept called The Information Layer.

  With these three items, I designed a visual “code” with symbols representing blocks of programming code and content. By examining mostly my own work, I developed the rules and basics to use the symbols to represent not the parts of the web application system, but also describing interactions withing the system.

  The original purpose of this was archival, record keeping for myself. However, I began to realize that there was nothing out there that visually describes the work that FEDs [front-end developers] were doing. We have code and and can talk about CSS, HTML, etc. But, maybe for the first time, there was something that allowed the work to be visualized and be more tangible.

  Status

  Currently, this is the second draft. Even though models are always being revised and changed, I kept the term “draft” because I wanted to present the working model in a state that was good enough for demonstrations. However, this draft appears, so far, to be close to being stable. Naturally, there is more work in the near future.

  Final Preview

  As I mentioned before, the final document will be presented as a microsite around early/mid July.

  Before that, I created a single page preview, giving a brief overview of the model and its use in “mapping” a single page, AJAX driven site. This is based on the sketches/drawing from the last Flickr preview and the same example will be used as a case study in the final document/microsite.

  Final Preview – Modeling a single page, AJAX driven site

• A Brief Musing on the Supposed Separation Between Mobile and Desktop

  A couple of months ago, I was looking at a promotional video touting some new technology. Something that was written solely for mobile. They went on about their processes, that by focusing not on the desktop, they were saving file size and increased performance, which is all and fine. Anything to life better, especially on those days when I want information without waiting for everything to compose itself during the morning rush hour. But at the end of this, I wanted to ask this question (which, in hindsight, I should have added to the comments):

  Why should there be anything difference between the desktop and mobile?

  Before answering, think about it real hard.

  Don’t worry. I’ll wait…

  The current paradigm of mobile is based on two things; the mobile phone and the tablet. But isn’t this the same sort of think we had before – the PC as the desktop. Didn’t we got over this? I got over this years ago, especially when my previous job required me to work with both Windows and Linux.

  What I am thinking is that the current paradigm is just as short-sighted.

  Let me put it this way? In a year or less, why not see a mobile device become the desktop?

  Why not give the "desktop" have touch-enable events like its mobile cousins?

  What I am imagining is the mobile/desktop schism not just disappearing. It simply gets redefined.

  If my life is nearly almost located within the confines of my mobile phone, why not go all the way?

  Our perception of the desktop is that of the monitor tethered to an external hard drive and et. al. What about a rapidly approaching near future where our version of the "desktop" is a mobile device tethered to cloud storage.

  Just a thought?

  Don’t wait too long.