Date post: | 03-Jan-2016 |
Category: |
Documents |
Upload: | kristian-thompson |
View: | 213 times |
Download: | 1 times |
Visual design
The “look” of your interface
Project: What to do now
Start brainstorming!!– Lots of ideas, then narrow down to 3 or 4
Explore design space– Vary what you can – hardware, forms of input, forms of output,
features, requirement priorities, usability priorities
Be off the wall, crazy– This will lead to less crazy but original ideas
Project poster – March 4 Project report + prototype: April 1
Midterm review
How to study:– Look at slides for topics, bullets, vocabulary, etc.– Find details and examples in the book
Test format– 25-50% true/false, multiple choice, fill-in-blank– Rest short answer, with one longer answer
Review
What is usability? What is design? Why is it hard? The user centered design process
– General steps– various models – high level understanding– What is waterfall model?
Requirements Review
Functional vs. non functional What pieces are part of this?
– User characteristics, task analysis, environment, etc.etc. – Persona – what is it and what makes a good one?– Scenario – what is it and what makes a good one?– Stakeholders (primary, secondary, tertiary, facilitating)
How do you gather data? Tradeoffs?– Interview, questionnaire, observation, etc. etc.
Task models– Hierarchical task analysis - how to do it?– Use cases – what are they good for?
Humans review
What are issues concerning our senses? Model Human Processor model of memory
– What are pieces of memory (STM, LTM, etc.)– What’s a chunk? Why do we care?– What are implications? (recognition over recall,
externalizing, etc.)
Other processes – what are they? (attention, learning)– What are the implications?
Interaction Review
Command line WIMP Direction manipulation Pen & mobile Speech & natural language
Issues, advantages, disadvantages, etc.
Prototyping
Prototyping– What’s vertical vs. horizontal?– What’s low vs. high fidelity?– What are various methods?
Scenarios, mockups/sketches, etc. Issues and tradeoffs?
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
Graphic Design
A comprehensible mental image Appropriate organization of data, functions, tasks
and roles High-quality appearances
The “look”
Effective interaction sequencing The “feel”
Classes at UNCC– http://www.uncc.edu/schedule/subject/artg.html
Graphic Design
Involves knowledge of:– Sequencing– Organization– Layout– Imagery– Color– Typography
Graphic Design Principles
Metaphor Clarity Consistency Contrast Alignment Proximity
Clarity
Every element in an interface should have a reason for being there
– Make that reason clear too!
White/open space– Leads the eye– Provides symmetry and balance– Strengthens impact of message– Allows eye to rest between elements of activity– Used to promote simplicity, elegance, class, refinement
Clarity via “White” Space
White = Open
Example
Clear, cleanappearance
Opinion?
Example
Does this convey different impressions?
Consistency
In layout, color, images, icons, typography, text, …
Within screen, across screens Stay within metaphor everywhere
Platform may have a style guide– Follow it!
Example
Home page Content page 1 Content page 2
www.santafean.com
Alignment
Western world– Start from top left
Novices often center things– No definition, calm, very formal
Grids– (Hidden) horizontal and vertical lines to help locate window
components– Align related things– Group items logically
Grids – use them
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Three Column Layout Grids
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Symmetry vs. Asymmetry
Beware of too much symmetry
Proximity
Items close together appear to have a relationship
Distance implies no relationship
Time:
Time
Example
Name
Addr1
Addr2
City
State
Phone
Fax
Name
Addr1Addr2
CityState
PhoneFax
Name
Addr1Addr2
CityState
PhoneFax
Two-level Hierarchy•indentation•contrast
Grouping by white space
Alignment connects visual elements in a sequence
Logic of organizationalflow
Slide fromSaul Greenberg
Economy of visual elements
– Minimize number of controls
– Include only those that are necessary eliminate, or relegate others to secondary windows (but don’t want too many extra windows!)
– Minimize clutter so information is not hidden
Example
Overuse of3D effects
Haphazard layoutfrom mullet & sano
Repairing a Haphazard layoutfrom mullet &sano
Contrast
Pulls you in – set off most important item Guides your eyes around the interface Supports skimming Add focus
Example
Visual noise
Color
Use for a purpose and sparingly Draw attention, communicate organization, to
indicate status, to establish relationships, aid search Use redundant cues
– Color-blindness– Enhances performance
Be consistent with color associations from jobs and cultures
How many small ovals?
Now how many small ovals?
Yellow– happy, caution, joy
Brown– warm, fall, dirt, earth
Green– go, on, safe, envy, lush,
pastoral
Purple– royal, sophisticated, Barney
Color Meanings: Contextually Specific
Red– aggression, love – hot, warning, stop, radiation
Pink– female, cute, cotton candy
Orange– warm, autumn, Halloween
Blue– cold, off
Color Meanings: Culturally Specific
http://www.ricklineback.com/culture2.htm
Legibility and readability
Characters, symbols, graphical elements should be easily noticable and distinguishable
Text set in Braggadocio
Text set in Helvetica
TEXT SET INCAPITOLS
Text set in Times Roman
Saul GreenbergU. Calgary
Legibility and readability
Proper use of typography – 1-2 typefaces (3 max)– normal, italics, bold– 1-3 sizes max
LargeMediumSmall
LargeMediumSmall
Readable
Design components to be inviting and attractive
Design components to be inviting and attractive
Unreadable
Design components to be inviting and attractive
Design components to be inviting and attractive
Saul GreenbergU. Calgary
Remember
Form follows function– Visual elements should help convey purpose and meaning
Be consistent Just like all design – iterate and get feedback!!
Let’s analyze:– http://www.cnn.com/– http://www.microsoft.com/