User Interface Design. Lesson 4 Design Principles

Size: px

Start display at page:

Download "User Interface Design. Lesson 4 Design Principles"

Ginger Cobb
5 years ago
Views:

1 User Interface Design Lesson 4 Design Principles

2 Objectives 80/20 rule (Pareto Principle) Simplicity Consistency Feedback

3 80/20 Rule The 80/20 rule, also know as the pareto principle, simply put says that 80% of the time, only 20% of the controls or features will be used. Put another way 80% of people will only use 20% of the features available in an app, so when you decide on features remember that there s a trade off with extra features. They may be used less than you d expect.

4 Like What Everyone Else Likes As unique and creative as your personal style may be, it won t necessarily be for everyone. Taste and design preference varies from person to person, so you re best off playing it safe and simple by opting for typefaces, colors, and iconography that are easy to read and interpret; again, avoid reinventing the design wheel with each new app. - Banga, p.160

5 Simplicity The idea of creating simple designs seems simple, but it can be difficult to accomplish, especially in apps that require complex input from users. But it offers some valuable advantages: Greater usability Shortened learning curve More enjoyable experience (Usually) More visually pleasing designs

6 Simplicity Which remote control would you rather use? You may be a tech-savvy user, and would prefer the one on the left. However, most users would choose the one on the right

7 Simplicity Whatever design you go with, as long as your design makes sense and users decide they like it, you can feel free to experiment with newer designs. It often helps to get the opinion of someone who knows nothing about you re doing so you can get a fresh, unbiased opinion.

8 Consistency As with simplicity your goal is to make learning how to use your app easy and with as little frustration as possible. Being consistent with how interface elements look or are used will help keep your UI easier to use. This follows the principle of least astonishment. Essentially the user shouldn t be surprised by how something works, it should work how they would expect it to work. Button Button = Button Button

9 Feedback Feedback in UIs is not referring to getting feedback from the user about the UI (Although that is important for usability testing). Feedback in this case refers to getting feedback from the UI. Feedback refers to letting the user know that they have successfully or correctly interacted with the user interface. For example, a user taps a button and the buttons changes slightly to let the user know that they ve accurately clicked the button. Playing a sound when a button clicked achieves the same thing, although it relies on the user s device having their sound at level that they can hear. Button Unclicked Button Clicked

Feedback Feedback is important because it helps give the user confidence in the software they re using and certainty about the actions they ve performed. For example.

10 Feedback Feedback is important because it helps give the user confidence in the software they re using and certainty about the actions they ve performed. For example. In Windows, you can move a file by selecting it and cutting (Ctrl+X) and pasting (Ctrl+V). When the file is cut, the file icon becomes transparent, letting you know you correctly hit Ctrl+X and not accidentally hit Ctrl+C to copy. The C key is right beside the X key so this is a common mistake, but having the icon become transparent gives the user confidence that they ve hit the correct keys.

11 Feedback Contrary to this Mac OSX doesn t cut and paste files with feedback. To move files a similar way you must press Command+C (The same as copy) and in the destination folder press Command+Option+V. Because there was no feedback initially, a user who accidentally presses Command+V before pressing the Option key will paste a copy instead of moving the file. The only way to be absolutely certain the file was moved is to go back to original folder and make sure the file is no longer there. This is a small annoyance but a designer should strive to make the user feel confident in their actions.

12 Objectives 80/20 rule (Pareto Principle) Simplicity Consistency Feedback

13 References Essential Mobile Interaction Design by Cameron Banga and Josh Weinhold (Addison-Wesley 2014; ISBN: ) 13

Introduction. The Google Documents interface When you create a document in Google Documents, the interface for Documents will appear.

Introduction. The Google Documents interface When you create a document in Google Documents, the interface for Documents will appear. Introduction When working with a word processing application like Google Documents, it is important to be comfortable with the document interface and to know how to perform basic tasks with text. In this