7.0 INTERACTION DESIGN USER INTERFACEjosef muller brockmann. geigy chemical. walter ballmer. realistic simple for mobile better design fosters creativity and innovation translates

7.0 INTERACTION DESIGN

USER INTERFACE

PRINCIPLES OF INTERACTION DESIGN | SUMMER 2014

DESIGNISM #18

A PICTURE IS WORTH A THOUSAND WORDS. AN INTERFACE IS WORTH A THOUSAND PICTURES.– BEN SHNEIDERMAN

USER INTERFACE (UI)

The system with which people visually interact with machines and objects.

UI represents the information and actions available to a user through organization, graphical icons and other visual cues, interactions, and branding.

The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals.

TYPES OF INTERFACES

Command-based Virtual RealityInformation Visualization WebConsumer Electronics MobileSpeech MultimediaTouch AugmentedRobotic SensoryGUI

AFFORDANCES

Refers to an attribute of an object that allows people to know how to use it—e.g. mouse button invites pushing.

PHYSICAL VS. PERCEIVED

Physical objects have real affordances, like grasping, that do not have to be learned.

In contrast, UIs that are screen-based do not have these kinds of real affordances and have to be learned.

When designing affordances, making them obvious to clicking or touching makes it easy to know how to interact with it.

METAPHORS

Provide a structure that is similar in some way to aspects of a familiar entity but also have their own behaviors and properties.

First interface metaphors were used in the Xerox Star, they were used to represent objects as part of the ‘desktop metaphor’.

SKEUOMORPHISM

A design feature that is carried forth from the original version of a product in order to make people more comfortable with the new device or interface.

Skeuomorphism reached a peak in 2012, its use has on the decline in favor of the flat aesthetic.

FLAT DESIGN

Flat design refers to a style of interface design which removes any stylistic choices that give the illusion of three-dimensions—i.e. drop shadows, gradients, or textures—and is focused on a minimalist use of simple elements, typography and flat colors.

It is a reaction to skeuomorphism and is heavily influenced by the International Typographic Style of the 1950s which also sought simplicity, clarity, and the obsolescence of decoration.

JOSEF MULLER BROCKMANN

GEIGY CHEMICAL

WALTER BALLMER

REALISTIC

SIMPLE FOR MOBILE

BETTER DESIGN

FOSTERS CREATIVITY AND

INNOVATION

TRANSLATES GLOBALLY

FLAT

IT WORKS

BETTER USABILITY

MAKES TECHNOLOGY

APPROACHABLE

FUN AND WHIMSICAL

ICONSIcons represent objects and operations on the interface using concrete objects and/or

abstract symbols.

TIPS FOR ICON DESIGN

1. Create in vector format


1. Create in vector format2. Use limited perspective


1. Create in vector format2. Use limited perspective3. Use a consistent light source


1. Create in vector format2. Use limited perspective3. Use a consistent light source4. Keep it simple


1. Create in vector format2. Use limited perspective3. Use a consistent light source4. Keep it simple5. Beware of cultural differences


1. Create in vector format2. Use limited perspective3. Use a consistent light source4. Keep it simple5. Beware of cultural differences6. Use bold or contrasting colors


1. Create in vector format2. Use limited perspective3. Use a consistent light source4. Keep it simple5. Beware of cultural differences6. Use bold or contrasting colors7. Design with the final size in mind


1. Create in vector format2. Use limited perspective3. Use a consistent light source4. Keep it simple5. Beware of cultural differences6. Use bold or contrasting colors7. Design with the final size in mind 8. Consider using metaphors


1. Create in vector format2. Use limited perspective3. Use a consistent light source4. Keep it simple5. Beware of cultural differences6. Use bold or contrasting colors7. Design with the final size in mind 8. Consider using metaphors9. Avoid text


1. Create in vector format2. Use limited perspective3. Use a consistent light source4. Keep it simple5. Beware of cultural differences6. Use bold or contrasting colors7. Design with the final size in mind 8. Consider using metaphors9. Avoid text10. Avoid reusing interface elements


1. Create in vector format2. Use limited perspective3. Use a consistent light source4. Keep it simple5. Beware of cultural differences6. Use bold or contrasting colors7. Design with the final size in mind 8. Consider using metaphors9. Avoid text10. Avoid reusing interface elements11. Design consistent icon sets

DESIGNISM #19

AS FAR AS THE CUSTOMER IS CONCERNED, THE INTERFACE IS THE PRODUCT.– JEF RASKIN

HIERARCHY

Emphasizes some elements more than others—contrast guides the audience to most important information.

Hierarchy should be signaled by one or more cues, spatial or graphic:

SPATIAL GRAPHIC

alignment sizeposition shapeleading color

STRUCTURE

Alignment is a key to helping users experience a product in an organized, systematic way.

A grid system good to use for usability, aesthetics, and efficiency. They divide the screen into horizontal and vertical units.

A good grid is modular, which is flexible enough to handle variation while maintaining consistency, symmetry, and balance.

CONSISTENCY

Similar elements should share visual attributes (i.e. positioning, size, line weight, style).

PERSONALITY

Appropriate colors, images, and graphic elements create a positive first impression of the brand.

VISUAL NOISE

Visual noice is caused by superfluous visual elements that distract from the primary objective.

NAVIGATION

WAYFINDING

Wayfinding is the elements of the built environment that allow us to navigate through complex spaces.

pathsedgesdistrictsintersectionslandmarks

CORE COMPONENTS

OrientationWhere am I right now?

Route DecisionsCan I figure out the way to go?

Mental MappingDo I understand where I’ve been and where I should go next?

ClosureCan I recognize that I have arrived?

APPLYING WAYFINDING

Consistent Navigation on each page.

APPLYING WAYFINDING

Leaving “breadcrumb trail” for users.

APPLYING WAYFINDING

Use headlines or graphical cues to orient users as to where they are within your site.

APPLYING WAYFINDING

Simplify the amount of choices.

SIMPLE

COMPLEX

GAMIFICATIONGamification is the use of game mechanics and game design techniques in non-game

contexts.

WHY

Gamification works by making technology more engaging, by encouraging users to engage in desired behaviors, by showing a path to mastery and autonomy, by helping to solve problems and not being a distraction, and by taking advantage of humans’ psychological predisposition to engage in gaming.

GAME MECHANICS

The five most commonly used mechanics in gamification are:

PointsBadgesLevelsLeaderboardsChallenges

FOURSQUARE BADGES

KOBO BADGES

http://www.kobobooks.com/readinglife_awards

CANDY CRUSH LEVELS

LUMOSITY CHALLENGES

DESIGNISM #20

TRULY ELEGANT DESIGN INCORPORATES TOP-NOTCH FUNCTIONALITY INTO A SIMPLE, UNCLUTTERED FORM.– DAVID LEWIS

Documents

7.0 INTERACTION DESIGN USER INTERFACEjosef muller brockmann. geigy chemical. walter ballmer. realistic simple for mobile better design fosters creativity and innovation translates