Design for Hypermedia - Class 09 (2015B)
66
VART2226 Graphical User Interface
-
Upload
bryan-chung -
Category
Education
-
view
822 -
download
2
Transcript of Design for Hypermedia - Class 09 (2015B)
VART2226
Graphical User Interface
Schedule
Graphical User InterfaceModern GUIDesign concerns for interface
Interaction design principle
Interaction Feedback
Interaction design principle
Interaction Feedback
Action Reaction
Interaction design example
Click
More than just action and feedback
InvitationActionAcknowledgement
Inline editing
Inline editing
Inline editing
Inline editing
Drag and drop
Drag and drop
Drag and drop
Drag and drop
Drag and drop
Rearrange
Rearrange
Rearrange
Modern approach to UI
jQuery UI
jQuery UI
jQuery UI
jQuery UI
jQuery UI
jQuery UI
jQuery UI
jQuery UI
jQuery UI
jQuery UI
Convention vs. performance
Gutenberg’s diagram
Fitt’s law
Fitt’s law in physical design
Fitt’s law in desktop
Fitt’s law
Pixels around the current mouse pointer.Lower right cornerUpper left cornerUpper right cornerLower left corner
Top left lighting
Garbage in garbage out
Garbage in garbage out
Graphic noise
Flexibility vs. usability
Dialog box
Dialog box
Tabs
Bread crumb
Mental model
Mental model
Overview
Overview
Scroll bar
Scroll bar
Word count example
Word count example
Visual structure vs. information structure
Visual structure vs. information structure
Visual structure vs. information structure
Visual structure vs. information structure
Visual structure vs. information structure
Visual structure vs. information structure
Visual structure vs. information structure
Visual structure vs. information structure
Visual structure vs. information structure
Grid structure
Grid structure
Grid structure?
Grid structure
Common mistakes
1. Page not structured in prioritized order
2. Interactions overly complex and don’t offer guidance
3. Related areas not grouped in close proximity
4. Elements not properly aligned to create order
5. Elements not placed where people expect
6. Too many elements on page
