Category: Interaction Design

Improving the hamburger button

hamburger-nycgovThe hamburger button is the three-line “collapsed nav” indicator on a mobile app or mobile display of a website.

It’s pretty safe to assume that this guy will stick around on our screens for some more time. So instead of sounding like a jerk talking about the pros and cons of the mobile icon, I’d rather discuss potential improvements in the context of website navigation.

When we created the new Holtzbrinck.com, one of the world’s leading media companies, we had to reduce all the existing information to one single page. Readability was key, but we also realized that the page became far to long to browse on a small screen. We needed to provide users a means to navigate at all times. A Tab-bar like menu would have been far too intrusive, even if we had applied the “scroll up and show” pattern. Instead of using the classic sticky navigation bar on top, we decided to implement a different behavior.

source

Ideo – Introducing Avocado: A new toolbox for interaction designers

Interaction design for non-coders. Mobile-only?

Bounce, swivel, spin. Today’s interface design is all about making things move. But the tools we use to create those interactions haven’t kept pace with our smart, intuitive enough for a 3-year-old child devices.

As an interaction designer with a software engineering background, I usually bring ideas to life through coding.

For those who don’t code, there are tools that offer a less technical approach, such as Quartz Composer (a nearly decade old visual programming language) and Origami (a new tool built by Facebook that streamlines Quartz Composer).

The effort to make interaction design accessible to a broader set of people is a worthy cause, and crucial to the fast-paced live prototyping process at IDEO. That set me on a path to explore a new set of prototyping tools—ones that work for designers who don’t code.

Taken together, Quartz Composer and Origami offer a set of basic interface building blocks called patches. It’s an inspired start, and I saw ways to build upon those tools and conceal some of their complexity. http://facebook.github.io/origami/

source

Apple and Responsive Design

Apple has always had a funny relationship with responsive design. They’ve only sparingly used media queries to make minor visual tweaks on important pages, like their current homepage.

With iOS 6, and the subsequent release of the taller iPhone 5, Apple introduced something called Auto Layout—a relationship-based layout engine. Unlike the iPad, which required a separate build, apps for the taller iPhone were the same build with layout adjustments applied. Auto Layout was Apple’s first true foray into responsive design within native applications since, much like the web, different layout rules were applied to the same base code.

Last week, Apple introduced iOS 8, and with it, something they’re calling Adaptive UI. The main feature of Adaptive UI is the ability to specify layout rules based on Size Classes, which are really just breakpoints set by Apple.

Developers can now use a single View Controller (or page, in our world) with various layout rules applied across Size Classes (or breakpoints) to accommodate devices of all sizes. While there are only two Size Classes right now, compact and regular, Apple has left a lot of room to add more, or to even let developers set breakpoints themselves in the future.

It may be adaptive in name, and hard-coded breakpoints may seem like adaptive thinking, but the groundwork has been laid for responsive design within native iOS applications. It’s been interesting to watch Apple’s path from static, to adaptive, to responsive, and it’ll be even more interesting to watch third-party developers take advantage of the workflow benefits of responsive design that we’ve become accustomed to.

source

Using the :target pseudo-selector for alternative layouts

I really like the :target pseudo-selector. It enables you to style the target of a so called skip-link. For instance when you link to a section in an article: you could highlight the header of that section. Or you can use it for toggling simple drop-down menus — the ones you see a lot on small screens. But you can also use it to create a completely different layout.

I used this technique on my Daily Rectangle site. As you can see (if your browser supports the vh unit) all the images are as high as the viewport. That’s nice, it enables me to enjoy one single image. But sometimes I want to see all the images on a grid. I could have created a PHP script that responded to a querystring. Or a small JavaScript. But instead I used the :target pseudo-selector. It’s very simple. First I did this…

source

The Z-Axis: Designing for the Future

Building interfaces as a system of layers.

For years we’ve thought about the web as a two-dimensional space filled with pages that sit side by side on a flat, infinite plane. But as the devices we design for take on an increasingly diverse array of shapes and sizes, we should embrace new ways of designing up and down. By building interfaces using a system of layers, we solve tricky design problems, flexibly adapt to a variety of screens, and create new patterns that will point the way to future interactions.

In geometric terms, the z-axis is the vertex that measures space above and below the x- and y-axes. Translation for those of us who napped through geometry: it’s how we describe panels and layers that sit above or below one another.

Designing on the z-axis simply means incorporating three-dimensional physics—as represented by the z-axis—into our interface designs. Not the faux-depth of skeuomorphic text shadows and button highlights, but an interface made of components that exist on distinct layers and move independently of one another.

z-axix-layers

source

User Interface Design Tips, Techniques, and Principles

A fundamental reality of application development is that the user interface is the system to the users. What users want is for developers to build applications that meet their needs and that are easy to use. Too many developers think that they are artistic geniuses – they do not bother to follow user interface design standards or invest the effort to make their applications usable, instead they mistakenly believe that the important thing is to make the code clever or to use a really interesting color scheme. Constantine points out that the reality is that a good user interface allows people who understand the problem domain to work with the application without having to read the manuals or receive training.

User interface design important for several reasons. First of all the more intuitive the user interface the easier it is to use, and the easier it is to use and the less expensive to use it. The better the user interface the easier it is to train people to use it, reducing your training costs. The better your user interface the less help people will need to use it, reducing your support costs. The better your user interface the more your users will like to use it, increasing their satisfaction with the work that you have done.

2. UI Design Principles

Let’s start with the fundamentals of user interface design. Constantine and Lockwood describe a collection of principles for improving the quality of your user interface design. These principles are

  1. The structure principle. Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture.
  2. The simplicity principle. Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.
  3. The visibility principle. Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.
  4. The feedback principle. Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
  5. The tolerance principle. Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.
  6. The reuse principle. Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

source