1. Rekayasa Perangkat Lunak User Interface Design

2. 2 Interface Design Easy to use? Easy to understand? Easy to learn?  lack of consistency  too much memorization  no guidance / help  no context sensitivity  poor response  Arcane/un friendly Typical Design Errors

3. Golden Rules Place the user in control instead of ? Reduce the user’s memory load dos vs. windows? Make the interface consistent for the user …btw, who’s the user? Should the user work with the designer, then, during UI design?

4. Place the User in Control Define interaction modes in a way that does not force a user into unnecessary or undesired actions. Allow user interaction to be interruptible and undoable. Streamline interaction as skill levels advance and allow the interaction to be customized. linear text vs. pie chart? Design for direct interaction with objects that appear on the screen. how? any examples?

5. Reduce the User’s Memory Load Reduce demand on short-term memory. how many? Establish meaningful defaults. Define shortcuts that are intuitive. The visual layout of the interface should be based on a real world metaphor. Disclose information in a progressive fashion

6. Make the Interface Consistent Allow the user to put the current task into a meaningful context. Maintain consistency across a family of applications. If past interactive models have created user expectations, do not make changes unless there is a compelling reason to do so.

7. Button pitfalls Maintain consistency Don’t make your users think!

8. User Interface Consistency The Principle of Least Surprise Similar things should look and act similar Different things should look different Other properties Size, location, color, wording, ordering Command/argument order Pre-fix vs. post-fix Follow platform standards

9. User Interface Design Process

10. Interface Analysis Interface analysis means understanding 1.the users who will interact with the system through the interface; 2.the tasks that end-users must perform to do their work, 3.the content that is presented as part of the interface 4.the environment in which these tasks will be conducted.

11. User Analysis Are users trained professionals, technician, clerical, or manufacturing workers? Are the users capable of learning from written materials or have they expressed a desire for classroom training? Are users expert typists or keyboard phobic? What is the age range, gender, primary spoken language of the user community? Is the software to be an integral part of the work users do or will it be used only occasionally? Are users experts in the subject matter that is addressed by the system?

12. Task Analysis and Modeling Answers the following questions … What work will the user perform in specific circumstances? What tasks and subtasks will be performed as the user does the work? What specific problem domain objects will the user manipulate as work is performed? What is the sequence of work tasks—the workflow? Use-cases define basic interaction Task elaboration refines interactive tasks Object elaboration identifies interface objects (classes) Workflow analysis defines how a work process is completed when several people (and roles) are involved

13. Swimlane Diagram

14. Analysis of Display Content Are different types of data assigned to consistent geographic locations on the screen (e.g., photos always appear in the upper right hand corner)? Can the user customize the screen location for content? Will graphical output be scaled to fit within the bounds of the display device that is used? How will color to be used to enhance understanding? How will error messages and warning be presented to the user?

15. Why study user interfaces? Good UIs are critical to success UI programming is easy (sophisticated algorithms not required) straightforward (can immediately correct mistakes) fun (results are immediately visible) rational (apply simple rules) UI design is not graphic design

16. User Model

17. Cardinal axiom “A user interface is well-designed when the program behaves exactly how the user thought it would.” – Joel Spolsky user is happy = user in control = S/W correctly interprets user’s actions loss of control  depression, frustration (“Learned Helplessness” [Seligman]) All the other rules are just corollaries: Golden rules: place user in control, reduce user’s memory load, make interface consistent

18. User and program models User model: User’s idea of what’s happening Program model: Program’s idea of what’s happening (i.e., what’s actually happening) Successful UI when program model corresponds to user model Speak user’s language Follow real-world conventions, make information appear in natural and logical order Use metaphors from real world

19. Example Pictures in documents are embedded in word processor (e.g., Word) not embedded in HTML With WYSIWYG HTML editor (e.g., FrontPage), what do you do? change user model (describe in manual, explain with popup dialog box) change program model (make copy of picture in subfolder)

20. How do you get the user model? Ask the users! The 50-cent usability test Usually 5-6 people is enough, will start to see consensus Don’t need formal usability lab, or “people off the street” Just sketch or prototype and ask your neighbor

21. User models are simple If your program model is nontrivial, it’s probably wrong (“invisible sheets” in Excel) Click hereThis window comes to top!

22. Choices “Every time you provide an option, you're asking the user to make a decision.” – Joel Spolsky This is “unequivocally the most moronic ‘wizard’ dialog in the history of the Windows operating system. This dialog is so stupid that it deserves some kind of award. A whole new category of award.”

23. Too much freedom is dangerous floating menu barhuge system tray How many users want these?

24. Metaphors Also desktop, folders, paintbrush,... vs.

25. Affordance afford – to make available or provide naturally (door with metal plate affords pushing) vs. (30% usability)(100% usability)

26. Affordance (cont.) Where to grab? Where to click? What to drag?

27. Consistency, not creativity “A foolish consistency is the hobgoblin of little minds” – Emerson Application should be consistent with itself and with other programs Examples: FrontPage, Visio Beware of creativity: Less like user model More work to implement Do not leverage future/hidden features “Just because Microsoft does it, doesn't mean it's right” Examples: Tab from name to password, Netscape’s reimplementation of common controls

28. Make explanations brief “Users don’t read the manual” – Spolsky May not have the manual (on airplane, demo version) Too busy / distracted / impatient “Users don’t read anything” – Spolsky advanced too busy novice hope defaults are ok in-between try to read but get confused vs.

29. Many users are intimidated by computers vs. (no dialog) Which is better for an intimidated user?

30. Users can’t control the mouse well What’s the problem? sub-optimal pointing devices bad conditions (dirty, old, or cheap mouse; crowded desk) medical disabilities (young, old, arthritis,...) in a hurry “Mile-high menu bar” Macintosh: slam mouse to top, get menu Windows: ½ by ¼-inch target Easiest places to point: four corners (Windows 95 start menu blunder: 2 pixels from corner) Programmers generally stick to 0, 1, or n They want to avoid magic numbers (Why can you only open 20 windows?) But all n>1 are not equally likely (window close to edge should snap in place)

31. Don’t tax the user’s memory Make objects, actions, and options visible User should not have to remember (too much) information

32. Some bad designs adaptive menu What principle is being violated? office “assistant”

33. Activity-based UI Two ways of designing UI: What features should be there? Greeting card example: add text, add picture, get predesigned card from library, send by email, print What activities will users do? Greeting card example: birthday greeting, party invitation, anniversary greeting (leads to unexpected features: remind to send next year) Example: Excel was designed for financial number-crunching, but many use it for lists Improv was to be “killer app” for NeXT great for complicated multi-dimensional financial models painful for lists

34. Open-ended vs. sequential operation History of UI goes back-and-forth b/w user-in-control (command-line, Word,...) sequential steps (wizards,...) vs.

35. Dangers of color traffic light is green Driving at night in San Jose, where the street lights are yellow traffic light is yellow

36. Color Rules

37. Color Meanings