Book Project:
How to Build Beautiful User Interfaces

Last spring marked 10 years of working in the mobile industry for me. During that time I have participated in building user interfaces and frameworks in quite a few different programming languages and operating systems for many different mobile devices and products in Nokia and Jolla. For almost as long I have been jotting down notes about the craft, with the intent of some day using the material as a basis of a book. Most books about user interfaces are either written by engineers targeting specific programming languages and frameworks with limited understanding of design concerns, or written by designers lacking credible technical backbone and understanding of how to realise the designs they present. Most interesting things happen at the intersection of disciplines, my aim is to write a book that merges the two fields in one seamless, coherent body of work.

The road to the finish is long. Currently I have only about thirty pages worth of miscellaneous notes that when cleaned up and written properly would probably fill around hundred pages. With some more research, competitor studies, examples, graphs and other visualizations the book probably grows even longer, though I hope to keep the book short to avoid writing that presents the valuable information in the first chapters and then goes on to artificially stretch the subject hundreds of pages more. The initial writing on the blog will be quite informal, and skip the more tedious parts like proper references. I plan to write about layouts, scalability, visual design, fluid transitions, navigation, touch interaction, context-sensitivity, data visualisation, typography, text input, regional support, tooling, architecture, performance, work flow, quality, education and future.

You can follow my progress by subscribing to the blog feed or by following me on Twitter.

What is a user interface

User interfaces provide abstractions needed for navigating to, consuming, capturing and creating content, communicating with other people, and configuring the device and services for the use. Interfaces actively predict user behavior to reduce the need for explicit effort, guide the user from accomplishing one task to another, and finally notify user of events and messages. User interfaces generally rely on displays for presenting visual data like pictures or text, on speakers for playing music and sound notifications, and to a limited extent on vibras and piezos for haptic feedback. Input devices like touch displays and physical buttons are used for navigating within the user interface, for editing content and typing in new data, devices like cameras and microphones for capturing new content, also there is a growing plethora of other sensors for sensing the surrounding environment.

Hygiene

An ability to build fast, reliable, responsive and pixel-perfect user interfaces is a big competitive advantage to any serious product company. Beautiful and effortless products create emotional attachment. Beauty comes from attention to detail and understanding what the users need. Unfortunately beauty is rare, the world is filled with clumsy and awkward user interfaces, where functionality, business realities and pressing deadlines have trumped the less tangible values. Thankfully a revolution is brewing: a tidal wave of popular online services, smartphones, apps and AAA game titles have pushed up hygiene, the level of quality people expect from software. The world is increasingly digital, and even relatively mundane consumer products like toll payment systems, electronic tax return forms and work time sheets are now being benchmarked against the best software from the industry behemoths like Apple and Google.

Psychology

Good user interface design is closer to the study of behavior (cognition, perception, learning and memory) than art, we have more things in common with other people than we often would like to admit. More and more of the principles we derive from behavioral studies are supported by empirical biological, physiological and genetic data. Even the aesthetics have their roots in psychology and science: we are attracted by clean, simple, symmetrical, natural and familiar objects. Pursuing universal qualities is also important since the user base of an product is rarely culturally, sexually or age-wise homogenic. We appreciate user interfaces that allow us to do correct, predictable and complete actions and that do not cause negative feelings. A delightful user interface surprises us in a positive way, for example by exceeding our expectations or by challenging our previous thought patterns in a creative way.

Craftsmanship

While user interface design is rooted in sciences the big part of the craft is simply engineering: the art of building things. User interface project needs people who can draw good-looking vector icons and other graphical assets, assemble balanced layouts, program correct behaviors, chart a complete experience loop, present the data appropriately on the view, connect the states together with smooth transitions and bring all the pieces together with the given hardware, software, data, social and economical constraints. The ability to build things fast is critical: more prototypes you have time to build in a given time and resources the better the end experience will be. To become fast at building interfaces you need to be familiar with the state of the art, use the best tools and techniques available, and what is most important, practice by building a lot of interfaces. You need to be familiar with the designs and hardware the competitor products are based on, and libraries and architectures they have been built with. Achieving excellence alone is very difficult, the fastest way to reach the top is to join an established expert team, and expose yourself to a lot of peer review.

Interconnected system

User interface is the user-facing, top-most layer of an complex technical system. Overall reliability of the interface is bound by the quality of the underlying hardware, middleware libraries and database systems. If the input data is bad or incompatible with the design intent no amount of data massaging will make the presentation great. Similarly no amount of compensation in software will make poor hardware like a low contrast ghosting display perform well. All parts that make up the experience are interconnected, every team member working on the product needs to care about the user experience regardless of their speciality domain and commit to the overall design goals. Exposing unknowns and detecting the pain points that prohibit you from building good user experience as early as possible is critical for the success of the project. Prototyping different aspects of the product and organising short empirical UX studies throughout the product development cycle are good ways to validate the assumptions.

What makes interface beautiful?

Desirable and beautiful products create aesthetic engagement and enhance user commitment to the brand. A beautiful user interface is composed of many overlapping and interviewing stories and metaphors user can easily relate to. A beautiful interface also needs to be fast and responsive so user doesn’t have to wait. The provided actions should behave predictably and reliably to enforce trust and learning. A beautiful user interface is forgiving and has a friendly tone of voice. The style should be calm and clean to bring the functionality and content to the foreground of the experience, though in some domains like games the overall style can be stronger and the interface play a bigger part of the experience. A beautiful user interface should, of course, also be beautiful to look at, which requires good visual taste from it’s authors that comes from visual thinking, design knowledge and experience of building products.



Discussion has just started! Join in...

  1. Lourens says:

    It is amazing! Thank You!

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment

You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>