The Wilson Project Blog of UX/Front-End Developer Ivan Wilson

Menu Skip to Navigation

Tag Archive / user interface

  • The Long Game

    The past is the beginning of the beginning and all that is and has been is but the twilight of the dawn.
    – H. G. Wells

    I’m marking a special anniversary today.

    And all this started because I loved Vancouver.

    After my first visit in August 2008, I decided to plan another trip. Somehow, I found a conference that I hadn’t heard about called IxDA Interaction 09. Never knew anything about interaction design nor was it my first concern. All wanted was to get back to the city again. But instead, I learned from all the talks and people about interaction design.

    That was not only an introduction to interaction design. It was a gateway to me learning about user experience design and later information architecture.

    I decided to return the following year for Interaction 10 in Savannah, Georgia. At that conference, I attended the lecture Designing for the Web in the World by designer Timo Arnall.

    That and his film Wireless in the World a year earlier really influenced me. This is where re-evaluated my work as a front-end developer, viewing my work as dealing with information and not just coding.

    And after years of conferences, events, reading and self-study, I ended up working with an excellent UX team at CQ Roll Call and now the growing team at FiscalNote.

    And all this because I want another trip to Vancouver… 🙂

  • Future Imperfect

    As I’m writing this, it’s a rainy morning in Vancouver, Canada. Nothing new. Spending time with friends that I don’t see but once a year near my birthday. In this case, I’m here to attend the IA Summit conference this week. This is my first non-US conference since IxDA Interaction 13 in Toronto.

    Looking back at that conference there were a number of things that stood out. A number of them became influential years later. One of them was a short lecture by a designer named Nate Archer called “Beyond Responsive”.

    Nate Archer: Beyond Responsive from Interaction Design Association on Vimeo.

    Well, four years later, those words seem prescient right now. The world has been filled with all sorts of devices that we access the web. More than just the trio of phone/tablet/desktop. Basically, any device that has access to the web is an access point – from watches to 4000K TVs. But there is another way of looking at this. Instead of “devices”, let us consider going in the direction of “inputs”. Responsive design appeared not just with mobile devices but devices which are also touch-enabled. Now, mobile devices are as ubiquitous as any household device, front-end developers like myself have to deal with coding for interactions that take place on touchpad as much (or even more) than mouse/keyboard. (Though we could be doing a better job at the keyboard then we are currently doing.)

    [Note: touch-enabled devices are not necessary phones/tables and doing feature support for touch is still a bit tricky]

    In some respects, the beautiful lie of responsive design is that the constraints are visual, via breakpoints and media queries? But what if those constraints aren’t visual. CSS has hidden artifacts describing inputs – media types. If one would look at the specs (https://www.w3.org/TR/CSS21/media.html#media-types), the following types are supported:

    screen, print, speech/aural, handheld, tty, etc.

    Screen is the most familiar with print/speech following. But there’s tty? From the spec, tty refers to devices like terminals and teletypes. The later was a telecommunication device that has long since disappeared with the advent of email. But back in the day, it was considered important enough to be considered in the W3C CSS spec. Now think about the future. Someday, will we may consider mouse/keyboard interactions as obsolete as teletype?

    Now, we are seeing the advent of AI interfaces – sophisticated interfaces that allow access to the same information like we do with mouse/keyboard and touch.

    Which comes back to the conference I’m attending, IA Summit. This year’s topic is artificial intelligence and information architecture. The main job of a front-end developer is building interfaces for acquiring information. Obviously, things will change in the next couple of years. But change into what?

  • Revisiting The Art of Responsive Design

    The Art of Responsive Design

    About a year ago, I wrote a blog post about responsive design. But instead of the usual techniques, I decided to describe it with three terms – Constraints, Content, and Context.

    A year later, these three terms are more relevant than ever, especially Context. I am thinking about re-editing the post for brevity but the main points will remain.

  • 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

    Mobile UX DC - Session board 2012

  • 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.

    IMAG0433

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

    Preview - New Project

    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.