Presentation on theme: "Life, the Universe and GUI Design By Mike Miserendino."— Presentation transcript:
Life, the Universe and GUI Design By Mike Miserendino
What is the question?
Where do we start?
Requirements Sources Research User Interviews Focus Groups User Groups
Interview Ask lots of questions Have the user do most of the talking Mix questions types from yes/no to those requiring an explanation
GUI Guidelines and Standards Contains basic design guidelines Provides a consistent look and feel Helps maintain company standards Builds foundation for UI specifications
User Interface Specification Blueprint for all user interfaces Contains user interface layouts and overall application map Describes function of all user interface components Details the layout, behavior, and flow of all UI content Establishes detailed requirements Provides verification testing
User Interface Map
Architectural Specifications Modeled from User Interface Specification and business logic Provides basis for Interface Control Document
Interface Control Document Maps user interface to application Derived from UI Specification Satisfies UI requirements Standard reference for the GUI developers so that they can look up and understand the interface methods exposed by the Back-End components
Insert ICD Sample Here
User Interface Design Good UI design has everything to do with the user's tasks, goals, cognitive processes, and behavior. Simple Functional Clean
Design Inspiration Print Ads Graphic Design TV / Movies Real life models
Okudagram Display type invented by Michael Okuda for starship console displays seen in Star Trek.
Sketches Roughs of user interfaces or controls Add functional notes as needed Notepad or graph paper Colored pens
Wall Layouts Use Velcro backed cutouts or pinups of controls Sticky notes Easy to layout and modify Excellent for brain storming Difficult to back up – manual copy Not space efficient
Interactive Sketch Board Dry erase board with PC or printer Capability to save to file or hard copy Slow Expensive
Prototyping for Design Simple functions available Time consuming Limited access Reuse during prototyping phase
UI Models Deductive User Interface Inductive User Interface
Deductive User Interface Most elements in software today require the user to study them and deduce their behavior Typically found in traditional applications
Deductive User Interface
Inductive User Interface (IUI) Also called inductive navigation, the IUI model suggests how to make software applications simpler by breaking features into screens or pages that are easy to explain and understand. Informal tests suggest that users can perform tasks as quickly in this model as in traditional interfaces, and may find things more easily.
Design Considerations Navigation Input Devices Use of Controls Color Text
Some UIs are like a maze. Mazes make good puzzles. People are not particularly good at remembering long sequences.
Visible If something is important enough to be displayed to the user, make sure that the user will be able to see it.
Consistency "consistency makes the interface familiar and predictable“ (The Windows User Interface Guidelines for Software Design, Microsoft Press)
Custom Controls Unless you are making a game or multi- media application, try to use the controls that are provided by the operating system Users are already familiar with standard controls and will readily understand their purpose and rules of operation
Hover Help May provide far too much information to be effective. May disappear before the user can finish reading them.
Color is a phenomenon of perception not an objective component or characteristic of a substance Color is an aspect of vision; it is a psychophysical response consisting of the physical reaction of the eye and the automatic interpretive response of the brain to wavelength characteristics of light above a certain brightness level
Color Complementary colors Alerts Display Printouts Disability
Color Wheel Harmonious color combinations use any two colors opposite each other on the color wheel, any three colors equally spaced around the color wheel forming a triangle, or any four colors forming a rectangle
Color Wheel The color wheel is a visual representation of color theory mlhttp://www.visibone.com/color/wheel.ht ml Color Wheel Pro - wheel-pro.com/index.html
Color Blindness Approximately 8% of men are color blind to some extent while only 0.4% of women are affected. The key issue is to know when you are using colors which some people will not be able to differentiate.
Color Blindness Most color blindness involves red or green Safe Web Colors for color-deficient vision - /colours/
Color Blindness Follow direction from color blindness guides Offer alternative colors or a means to customize UI colors
Look and Feel
Text Fonts Pre-Rendered vs. Dynamic Text Uppercase
Fonts Sizing Font Family
Pre-Rendered Text Looks Great Artistic Control Custom Fonts Pros:
Pre-Rendered Text High Bandwidth / Capacity More Work & QA Poor Internationalization High Maintenance Attributes not alterable by user Cons:
Dynamic Text Low Bandwidth / Capacity Easy to Internationalize Easy to Modify Low Maintenance Support for Dynamic Content Run-time Font Attributes Pros:
Dynamic Text More Code Limited Selection of Fonts Less Artistic Control Cons:
Uppercase Avoiding uppercase is one of the first rules of netiquette because it is universally interpreted as shouting The use of all uppercase makes the information inherently difficult to read
Speaking Geek Avoid technical jargon Utilize technical writers to assist with any text displayed on screen
Windows 95 "Insert Floppy - please insert the disk labeled "Windows 95 CD-ROM'.
Address Most U.S. designed applications assume that every country in the world has the same address conventions Validating address forms tends to provide the most frustration for users (e.g. valid state required!)
Fixed Sized Controls
Development Control libraries Utilities Graphics software Macromedia Flash
Resources Books Magazines Internet UI Related Organizations UI Related Businesses
Recommended Reading Designing the User Interface, Shneiderman The Humane Interface, Raskin International User Interfaces, del Galdo, Nielsen Design Graphics Magazine Java Look and Feel Guidelines, Sun Microsystems The Windows Interface Guidelines for Software Design, Microsoft Press
Web Human-Computer Interaction Resource Network -