lecture 8: generating designs
DESCRIPTION
Lecture 8: Generating Designs. UI Hall of Fame or Shame?. Acrobat. Ghostview. UI Hall of Fame or Shame?. Xerox Star scrollbar. original Macintosh scrollbar. current Macintosh scrollbar. Nanoquiz. closed book, closed notes submit before time is up (paper or web) - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/1.jpg)
Spring 2011 6.813/6.831 User Interface Design and Implementation 1
Lecture 8: Generating Designs
![Page 2: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/2.jpg)
UI Hall of Fame or Shame?
Spring 2011 6.813/6.831 User Interface Design and Implementation 2
Ghostview
Acrobat
![Page 3: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/3.jpg)
UI Hall of Fame or Shame?
Spring 2011 6.813/6.831 User Interface Design and Implementation 3
Xerox Star scrollbar
originalMacintoshscrollbar
currentMacintoshscrollbar
![Page 4: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/4.jpg)
6.813/6.831 User Interface Design and Implementation 4
Nanoquiz
• closed book, closed notes• submit before time is up (paper or web)• we’ll show a timer for the last 20 seconds
Spring 2011
![Page 5: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/5.jpg)
6.813/6.831 User Interface Design and Implementation 5
1. A persona is: (choose one best answer)A. a member of the design team pretending to be a userB. a user joining the design team to help with the designC. a fictional person who represents a userD. a user in a domain analysis diagram
2. Which of the following are likely to be tasks (or subtasks) in a task analysis of an online calendar (e.g. Google Calendar)? (choose all good answers)
A. log in B. compute the hash code of the username C. edit an appointment D. print calendar
3. In a domain diagram, which elements have multiplicities? (choose all good answers)
A. preconditionsB. user classesC. tasksD. relationsE. entities
2019181716151413121110 9 8 7 6 5 4 3 2 1 0
Spring 2011
![Page 6: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/6.jpg)
Today’s Topics
• Design techniques– Sketching– Scenarios– Storyboards
• Design patterns• Simplicity
Spring 2011 6.813/6.831 User Interface Design and Implementation 6
![Page 7: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/7.jpg)
Sketching Designs
• Draw your ideas– By hand, not by drawing program– Paper or whiteboard
• Generate many ideas• Design in a group
Spring 2011 6.813/6.831 User Interface Design and Implementation 7
![Page 8: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/8.jpg)
Examples of Design Sketches
Spring 2011 6.813/6.831 User Interface Design and Implementation 8
![Page 9: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/9.jpg)
Examples of Design Sketches
Spring 2011 6.813/6.831 User Interface Design and Implementation 9
![Page 10: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/10.jpg)
Examples of Design Sketches
Spring 2011 6.813/6.831 User Interface Design and Implementation 10
![Page 11: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/11.jpg)
Scenarios
• Scenario is a story about a user using the system– Concrete, realistic, but fictional– Involves a user with a goal– Follows how the user achieves the goal
Spring 2011 6.813/6.831 User Interface Design and Implementation 11
![Page 12: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/12.jpg)
Storyboards
• Sequence of sketches illustrating a scenario• First prototype of a design
– Shows how the design can actually be used to satisfy a goal
Spring 2011 6.813/6.831 User Interface Design and Implementation 12
![Page 13: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/13.jpg)
Using Information from Analysis
• Are important tasks covered?• Which usability aspects matter most?• How large does the data get?
Spring 2011 6.813/6.831 User Interface Design and Implementation 13
![Page 14: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/14.jpg)
Design Patterns
• Patterns are good solutions to common problems– General GUI patterns: Tidwell, Salaakso– Web collections: Yahoo, Welie
• Pattern kinds– Structural– Navigation– Widgets
Spring 2011 6.813/6.831 User Interface Design and Implementation 14
![Page 15: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/15.jpg)
6.813/6.831 User Interface Design and Implementation 15
Structural Patterns
Spring 2011
Wizard
Center Stage
![Page 16: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/16.jpg)
6.813/6.831 User Interface Design and Implementation 16
Navigation Patterns
Spring 2011
breadcrumbs
pagination
![Page 17: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/17.jpg)
6.813/6.831 User Interface Design and Implementation 17
Widgets
Spring 2011
![Page 18: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/18.jpg)
Widgets for 1-of-N Choices
Spring 2011 6.813/6.831 User Interface Design and Implementation 18
Radio buttons
Drop-down menu
Single-selectionlistbox
Toggle buttons
![Page 19: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/19.jpg)
Widgets for 1-of-2 Choices
• Widgets for 1-of-N choices (with N=2), plus:
• Avoid:
Spring 2011 6.813/6.831 User Interface Design and Implementation 19
Checkbox
Toggle button
![Page 20: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/20.jpg)
Widgets for K-of-N Choices
Spring 2011 6.813/6.831 User Interface Design and Implementation 20
N checkboxes
Multiple-selectionlistbox
![Page 21: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/21.jpg)
Widgets for Window Organization
Spring 2011 6.813/6.831 User Interface Design and Implementation 21
Tab widget Accordion widget
Table of contents
![Page 22: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/22.jpg)
6.813/6.831 User Interface Design and Implementation 22
The Dreaded Nested Scrollpanes
Spring 2011
![Page 23: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/23.jpg)
Widgets for Dialogs
• Modal dialog box• Modeless dialog box• Sidebar
Spring 2011 6.813/6.831 User Interface Design and Implementation 23
modal sheet modeless sidebars
![Page 24: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/24.jpg)
Pros & Cons of Widgets
• Advantages– External consistency– Saves development effort
• Coding, testing, debugging, maintenance• Iteration and evaluation
• Disadvantages– Widgets may constrain designer’s thinking– Widgets encourage menu & forms style, rather
than richer direct manipulation style– Widgets may be used inappropriately
Spring 2011 6.813/6.831 User Interface Design and Implementation 24
![Page 25: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/25.jpg)
Simplicity
Spring 2011 6.813/6.831 User Interface Design and Implementation 25Source: Alex Papadimoulis
![Page 26: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/26.jpg)
Simplicity, 2003
Spring 2011 6.813/6.831 User Interface Design and Implementation 26
![Page 27: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/27.jpg)
6.813/6.831 User Interface Design and Implementation 27
Simplicity, 2011
Spring 2011
![Page 28: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/28.jpg)
Techniques for Simplicity: Reduction
• Remove inessential elements
Spring 2011 6.813/6.831 User Interface Design and Implementation 28
![Page 29: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/29.jpg)
Techniques for Simplicity: Double-Duty
• Combine elements for leverage– Find a way for one element to play multiple roles
Spring 2011 6.813/6.831 User Interface Design and Implementation 29
title bar scrollbar thumb
help prompt
breadcrumbs pagination
![Page 30: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/30.jpg)
6.813/6.831 User Interface Design and Implementation 30
Let’s Simplify This
Spring 2011
![Page 31: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/31.jpg)
6.813/6.831 User Interface Design and Implementation 31
Let’s Simplify This
Spring 2011
![Page 32: Lecture 8: Generating Designs](https://reader035.vdocuments.us/reader035/viewer/2022062501/56816404550346895dd5abe8/html5/thumbnails/32.jpg)
Summary
• Generate many ideas• Capture your ideas with sketches, scenarios,
and storyboards• Study design patterns and use them wisely• Keep it simple
Spring 2011 6.813/6.831 User Interface Design and Implementation 32