Nokia Developer - Visual and interaction design

Visual design takes place at many stages of product development and includes aspects such as layout, information design and animation.

Visual design takes place at many stages of product development. Early on, you may use sketches and renderings to inspire and to capture the essence of what the product could be. At other stages, you may use presentation sketches to clarify progress to stakeholders such as investors or the marketing team.

Eventually however, you will have to determine the final design — and the visual styling is only part of the task. Other aspects include:

The screen layout.
The information design.
Copywriting (for example, icon text labels, navigation menus, and error and action dialogues).
The colour scheme.
The choice of fonts.
The creation of UI graphics and icons.
The design of audio, animations, and transitions.

Quote

Strong information design promotes usability

While pure visual design deals with a product’s look and feel, information design deals with ‘the skill and practice of preparing information so people can use it with efficiency and effectiveness’ (source: Wikipedia, information design). In the case of mobile applications, strong information design can highlight and prioritise critical elements on-screen, help users understand feedback and commands, or clarify the purposes of UI controls. All of these factors can contribute to strong product usability.

Beautiful products work better

It may be hard to believe, but humans are more forgiving of mistakes in products that are more aesthetically pleasing, explains designer and cognitive psychologist Don Norman in Emotional Design: Why We Love (or Hate) Everyday Things:

‘Findings suggest the role of aesthetics in product design: attractive things make people feel good, which in turn makes them think more creatively. How does that make something easier to use? Simple, by making it easier for people to find solutions to the problems they encounter.

Visual design can convey and enhance your company image and brand

Strong visual design can help unify the look and feel of your products into a trusted and recognisable portfolio. It can also improve your company image and make your products appear more professional and contemporary.

Visual design can help sell and market your product

Strong visual design can make your products more desirable and help them stand out from the crowd. Look and feel is also often a decisive factor in users’ purchase decisions.

’Whether you’ve thought about it or not, people will ascribe a personality to your product based on the way it looks and acts. Therefore, it is in your best interests to be aware of the personality you are creating for your site through visual design (or lack of it) and make certain it’s telling the story you want.’
— Luke Wroblewski, interviewed in Designing for Interaction: Creating Innovative Applications and Devices

Attractive Things Work Better, an excerpt from Emotional Design: Why We Love (or Hate) Everyday Things, is available for download from the jnd.org website.

Reality check

Many organisations don’t begin visual design until late in the project: After all, there seem to be so many more-important things to work on. There are, however, benefits to introducing visual design in the earlier stages, especially if you have chosen the product’s platform or technology early on.

Adding some visual design to the conceptual stage can help to inform presentation sketches that may be required for marketing or other stakeholders.
Introducing visual design into the with valuable early insights into implementation challenges.
Adding real copy to your UI designs early on can uncover potential problems such as lack of space or illegibility.
Prototypes of transitions, animations, and effects may be more effective when supported by basic elements of visual design.

Links and resources?

The Full-screen usage section of Forum Nokia’s Design and User Experience Library provides guidelines and an extensive selection matrix to help developers decide the use cases for full-screen mode. Use cases for hiding of softkey labels are also discussed.

The library’s Scalable UI section provides an introduction to the S60 scalable UI and offers guidelines for designing and developing scalable S60 applications. Justifications for the creation of custom components are also discussed.

Themes

Theming enables designers to change the visual appearance of S60 and Series 40 devices while leaving their functionality intact. The Forum Nokia Design and User Experience Library includes a collection of theming tutorials, templates, sample files, and documentation.

Maemo™

The Forum Nokia documentation section includes an extensive collection of layout, interaction-design, and visual-design guidelines for the Fremantle release of the Maemo™ platform, and the Nokia N900 mobile computer.

Web Runtime

With home-screen widgets, users can view dynamic data directly on their home screens. The Web Developer’s Library area of the Forum Nokia Library includes sample widget code and a guide to designing and developing home-screen widgets.

Flash Lite

The Flash Lite Developer’s Library area of the Forum Nokia Library provides basic guidelines for designing a Flash Lite graphical user interface. Included are guidelines for dynamic-layout control, positioning of softkeys, and designing for multiple user-input methods.

Forum Nokia’s Sudokumaster — Designing a Flash Game for Keypad and Touch discusses the creation of a basic Sudoku game and demonstrates the design and implementation of dynamic-layout controls for multiple screen resolutions and input methods (key, touch, and key and touch).