More on the "Backwards" Approach to Gestural Interfaces

After Michael mentioned Norman's (and Nielsen's) dislike for Apple's gestural interfaces in class, I received a daily e-mail from Putting People First that features an analysis of their team's testing results: http://www.jnd.org/dn.mss/gestural_interfaces_a_step_backwards_in_usability_6.html.

I found a few ID-related points extremely pertinent to my experience in helping produce the mobile version of foreignaffairs.com at work. They call out current gestural interfaces for their poor incorporation of the idea of feedback. In their example, they mention the varying functionality of the "back button" that sometimes causes complete, unwanted exits ("falling off the cliff") from applications. I had a similar experience. If you visit foreignaffairs.com with a mobile device (or desktop UA switcher), you'll see that we have a collapsed listing of "Regions," "Topics," and "Books & Reviews" -- these collapsed lists depend on JavaScript for their expansion and display of children links. When clicked upon in the iPhone, the browser begins to look like it is loading another page. On Android and Blackberry devices, the expansion is delayed by a significant second or two. Overall, the functionality points out a mistranslation in the context of feedback for show/hide menus from desktop to mobile versions.

Scalability is another important ID factor that we've had trouble with in light of the mobile site. Many of our publication listings throughout the site feature a line for pub title, one for the author, and one for the magazine issue. Against the generally recommended 40px x 40px spacing for mobile links, there's barely 2px separating each line and thus it is extremely easy to click on the wrong part of the publication listing, even for those with smaller fingers (of course, this is more of a problem on Androids and iPhones).

What this, overall, points out is a disconnect that definitely exists in UX design for the mobile world -- a disconnect between the new "context" (gestural interfaces, for example) and desktop-safe design decisions. Although Norman and Nielsen talk more about the use of non-proven design techniques in their article, there is a whole other cans of worms that clearly exists re: the use of *proven* design techniques that can't be adapted to the lawless world of gestural interfaces and mobile devices.

UI Fundamentals for Programmers - 37 signals

After hearing the sentiments about how programmers always either shoot down design ideas or accept them only to finally implement their own version of the design specs - I felt that there is a very strong need to help them gain a perspective on UI design. I am a programmer myself and I do not have any design background whatsoever.

Here is one the of the best presentations I came across when I was initially searching for an introduction to UI design for programmers.

UI Fundamentals for Programmers by Ryan Singer from ChicagoRuby on Vimeo.

Ryan talks about how UI is not a separate layer but is a part of the software and the most important from a customer perspective. For a customer the UI is the application!

Ryan talks about the key elements of design which helped me streamline my thought process about a design.

1. Modeling

2. Screens (Inside-out Method)

3. Flows

4. Templates

I believe programmers in your companies would definitely appreciate a perspective on UI design and it would only help your future interaction with them.

Functionality vs. Aesthetics?

“Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs.

This is one of my favorite design quotes because it ties in both aesthetics and functionality. While it’s not imperative these two go together; however, when they do and work well together it can be amazing.

Of course, the harmony of functionality and aesthetics seems like a no brainer, it’s typically not that easy to achieve.
As stated in Alan Cooper’s book, About Face 3: The Essentials of Interaction Design, “… the people who are most often responsible for the creation of our digital products rarely take into account the users’ goals, needs, or motivations, and the same time tend to be highly reactive to market trends and technical constraints.”

In working in corporate environments, I have seen this constant struggle between the IT department and the business. Even with the best business requirements, the IT department still has a lot of power especially if the business has no technical expertise, which is normally the case. To me this in between role, many times the business analyst or UX consultant, is the key to achieving the best design without sacrificing functionality.

Mental Models by Indi Young

I like the book review theme we've got going on here so I thought I would throw one into the mix. Mental Models by Indi Young is a book that has a great technique for learning about the tasks and activities of your audience and then figuring out ways your system might be designed to support the activities. The only thing I don't like about the book is that the technique is called "mental modeling" which is too easy to be confused with the psychology meaning for mental modeling. So at a meeting one day we jokingly called them "mentivity models" and it kind of stuck. Mentivity being Mental + Activity because we can't call these activity models because the developers already have UML activity models. But I've seriously digressed.

Indi takes a fun low-fi approach that works for groups, to figuring out what your different user groups are wanting to do so that you can develop a website or application that supports the group you want (or don't want) to support. On the surface, the models seems most useful if you're developing a commercial website but I've found that with a little tweaking they will work for more constrained projects. To me one of the biggest values in the models is to have an easy to digest diagram that you can get all of the stakeholders around for a review. Getting everyone to understand and sign off on high-level functional requirements and user groups is really helpful. There's also some great stuff in there if you need to do any serious audience analysis.

See more here:

http://www.rosenfeldmedia.com/books/mental-models/

More Additional Reading

I would like to add a couple more books to the reading suggestions. Professor Oren suggested these books to me and they are great!!
Alan Cooper's About Face
Dan Saffer's Designing for Interaction

I am currently reading Dan Saffer's Designing for Interaction and it has proven to be very insightfull to me. I come from a Graphic Design background and this book provides a great perspective into designing for UI. Saffer talks about four major approaches to interaction design:
User-Centered Design (UCD)
Activity-Centered Design (ACD)
Systems Design
Genius Design.

Of the four, UCD and ACD are relevant to the topics we came across this week. UCD stictly focuses on the idea that "users know best" and in this approach users should be involved in every stage of the project. User data becomes an important determining factor in making decisions. ACD on the other hand focues on "behaviour surrounding particular tasks". This approach helps designers to direct on the "task at hand" and then design tools/products to support the task.

Another key aspect that Saffer talks about is the importance of Brainstorming in the ideation phase. I haven't come across this as much in Interaction Design as Graphic Design. But getting different heads from different perspectives in the brainstorming segment can yield some useful insights as well as provide direction in refinement.

Paper v. Digital Wireframing

With our last class focused, quite exclusively, on digital wireframing, I wanted to sing the praises for the more traditional side of the line – Paper Wireframes. Gasp – I know! How dare I suggest that someone disconnect from their computer, dust off their sketchbook and pick up a pencil?!?

In my design experience I’ve found that, when trying to get as many ideas out in a short amount of time, it is faster and easier to put it on paper. With paper and pencil there is no learning curve or bugs to work out. You aren’t relying on your hard drive (or an external server) to not crash and lose your work. One point that is equal in both uses is the disposable “throw away value” (Buxton, Sketching User Experiences) of each medium. Remember, the more ideas you get out in the least amount of time, the more likely you are to find a great concept. Alternatively, the less time you spend on each concept, the less connected you will be when the client rips it up – figuratively or literally.

I’m not suggesting that you un-tether from your computer completely. Once you’ve found the design you will move forward with, this is the point to open a design program and create a medium-fidelity mock up of your design. Hopefully by this point you’ve worked through the kinks in your wireframes, communication with the client, personas and low-fidelity sketches that you’ve created a design / interface / experience far superior to simply jumping in to a digital design.

For my website wire frames and sketches, I use a Paper Browser (http://www.raincreativelab.com/paperbrowser/).

Reading Recommendation

I'm reading Sketching User Experiences by Bill Buxton for Deb Satterfield's 595X Human Interaction Design class this summer. While I don't intend this blog post to be a book review, I want to express how much I can't put this book down.

First, a little back story about me: I received my BS in Visual Communication from Ohio University in 2001. Since then I've been primarily designing websites and legal animations, as well as print marketing for small companies in Chicago, IL.

As an undergrad I took a few classes in experience and usability, however, those terms were buried in the over-all encompassing Design Class. In my 'real world' experiences UX and UI is the elephant in the room. No one wants to address it, but they want a top-rate product. For the past few years I've been reinventing the process of how I approach design to better incorporate for future-use and usability. These concepts have always interested me and are the primary reasons that I am getting my MS in HCI.

Getting back to the book - I've been reading a lot of books on the subject, but probably would have overlooked this gem (because of the title) if not for Deb's class. The author addresses many topics that interest me (work environment issues with the 'design' process / the actual process / wireframing / prototyping) and many that I wasn't aware of (video environment) or that I took in to consideration as part of the process (play).

If you are interested in Practices in Human Computer Interaction (which I hope you are since you are in Mike's class this summer) I recommend picking up a copy of Sketching User Experiences - it is a quick read, highly informative and a book that I will most certainly go back to reference.

[Image used without permission from: http://www.amazon.com/Sketching-User-Experiences-Interactive-Technologies/dp/0123740371]

Interaction Design and Healthcare

How Interaction Design Can Help Fix Healthcare

View more webinars from David Cronin

This is the type of projects that I would like to work on. Does anyone know of any other companies that are doing this?

Geri

HCI 596: 2011

The first class session of HCI 596 for Summer 2011 starts tonight, and I have added all of the new authors (who responded to my survey with an e-mail address I could use to add them--there are still 8 more authors to come). The class this semester has an enrollment of 21 students, which is 2.3 (repeating) times more than the Summer 2009 (9 students). There will, hopefully, be a high frequency of excellent blog posts this summer about various topics related to HCI/User Experience.

I'm looking forward to reading the posts.