7.0 INTERACTION DESIGN USER INTERFACE

Size: px

Start display at page:

Download "7.0 INTERACTION DESIGN USER INTERFACE"

Horace Gregory
5 years ago
Views:

1 7.0 INTERACTION DESIGN USER INTERFACE PRINCIPLES OF INTERACTION DESIGN SUMMER 2014

2 DESIGNISM #18 A PICTURE IS WORTH A THOUSAND WORDS. AN INTERFACE IS WORTH A THOUSAND PICTURES. BEN SHNEIDERMAN

3 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.

4 TYPES OF INTERFACES Command-based Information Visualization Consumer Electronics Speech Touch Robotic GUI Virtual Reality Web Mobile Multimedia Augmented Sensory

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

6 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.

7 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.

12 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.

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

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

18 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.

19 JOSEF MULLER BROCKMANN

20 GEIGY CHEMICAL

21 WALTER BALLMER

25 REALISTIC FLAT SIMPLE FOR MOBILE IT WORKS BETTER DESIGN BETTER USABILITY FOSTERS CREATIVITY AND INNOVATION MAKES TECHNOLOGY APPROACHABLE TRANSLATES GLOBALLY FUN AND WHIMSICAL

26 ICONS Icons represent objects and operations on the interface using concrete objects and/or abstract symbols.

28 TIPS FOR ICON DESIGN 1. Create in vector format

29 TIPS FOR ICON DESIGN 1. Create in vector format 2. Use limited perspective

31 TIPS FOR ICON DESIGN 1. Create in vector format 2. Use limited perspective 3. Use a consistent light source

33 TIPS FOR ICON DESIGN 1. Create in vector format 2. Use limited perspective 3. Use a consistent light source 4. Keep it simple

34 TIPS FOR ICON DESIGN 1. Create in vector format 2. Use limited perspective 3. Use a consistent light source 4. Keep it simple 5. Beware of cultural differences

36 TIPS FOR ICON DESIGN 1. Create in vector format 2. Use limited perspective 3. Use a consistent light source 4. Keep it simple 5. Beware of cultural differences 6. Use bold or contrasting colors

37 TIPS FOR ICON DESIGN 1. Create in vector format 2. Use limited perspective 3. Use a consistent light source 4. Keep it simple 5. Beware of cultural differences 6. Use bold or contrasting colors 7. Design with the final size in mind

39 TIPS FOR ICON DESIGN 1. Create in vector format 2. Use limited perspective 3. Use a consistent light source 4. Keep it simple 5. Beware of cultural differences 6. Use bold or contrasting colors 7. Design with the final size in mind 8. Consider using metaphors

40 TIPS FOR ICON DESIGN 1. Create in vector format 2. Use limited perspective 3. Use a consistent light source 4. Keep it simple 5. Beware of cultural differences 6. Use bold or contrasting colors 7. Design with the final size in mind 8. Consider using metaphors 9. Avoid text

42 TIPS FOR ICON DESIGN 1. Create in vector format 2. Use limited perspective 3. Use a consistent light source 4. Keep it simple 5. Beware of cultural differences 6. Use bold or contrasting colors 7. Design with the final size in mind 8. Consider using metaphors 9. Avoid text 10. Avoid reusing interface elements

43 TIPS FOR ICON DESIGN 1. Create in vector format 2. Use limited perspective 3. Use a consistent light source 4. Keep it simple 5. Beware of cultural differences 6. Use bold or contrasting colors 7. Design with the final size in mind 8. Consider using metaphors 9. Avoid text 10. Avoid reusing interface elements 11. Design consistent icon sets

45 DESIGNISM #19 AS FAR AS THE CUSTOMER IS CONCERNED, THE INTERFACE IS THE PRODUCT. JEF RASKIN

46 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 alignment position leading GRAPHIC size shape color

48 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.

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

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

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

57 NAVIGATION

58 WAYFINDING Wayfinding is the elements of the built environment that allow us to navigate through complex spaces. paths edges districts intersections landmarks

59 CORE COMPONENTS Orientation Where am I right now? Route Decisions Can I figure out the way to go? Mental Mapping Do I understand where I ve been and where I should go next? Closure Can I recognize that I have arrived?

60 APPLYING WAYFINDING Consistent Navigation on each page.

61 APPLYING WAYFINDING Leaving breadcrumb trail for users.

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

63 APPLYING WAYFINDING Simplify the amount of choices. SIMPLE COMPLEX

64 GAMIFICATION Gamification is the use of game mechanics and game design techniques in non-game contexts.

65 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.

66 GAME MECHANICS The five most commonly used mechanics in gamification are: Points Badges Levels Leaderboards Challenges

67 FOURSQUARE BADGES

68 KOBO BADGES

69 CANDY CRUSH LEVELS

70 LUMOSITY CHALLENGES

71 DESIGNISM #20 TRULY ELEGANT DESIGN INCORPORATES TOP-NOTCH FUNCTIONALITY INTO A SIMPLE, UNCLUTTERED FORM. DAVID LEWIS

Note 8: Visual Interface Design

Computer Science and Software Engineering University of Wisconsin - Platteville Note 8: Visual Interface Design Yan Shi Lecture Notes for SE 3330 UW-Platteville Based on About Face 3: Chapter 14 Visual