Upload
terence-perkins
View
221
Download
0
Tags:
Embed Size (px)
Citation preview
Interface design
An introduction
JMA 308/545 – Class Web Site
http://www.jma.duq.edu/classes/gibbs/jma308/index.htm
• Media Site Live
• Web site
Today’s Objectives
Our Server, check accounts
Designing interfaces- things to think about Krug’s Thoughts: things that make us think HTML | CSS project page
How to access the server
Our Server
Our Server
Your private folder It’s a subfolder of users folder www.jma.duq.edu/users/YourLoginName
Save files (drag and drop files) while in either lab (CH205, CH345)
You can also FTP to there from home…
www.jma.duq.edu
How do I access the server?
Access from either CH345 and CH205 Start >> Computer (Z: Drive)
OR
\\jma1\users\username
How do I access the server?
From dorm or home
ftp://www.jma.duq.edu/users/YourLastName
Example: ftp://www.jma.duq.edu/users/gibbs/
You will be prompted for your user name and password Use the same name and password you used to login to
Windows
And The PUB folder
The User Folder
www.jma.duq.edu
USERS
www.jma.duq.edu
Folder
File
File
File
File
PUBFolder
Folder
Your Space
John DoeUSERS
File
File
FileFile
PUB Folder
Folder
Gibbs
www.jma.duq.edu
Users
My user folder
All files for Web must be in PUB
All files for Web must be in PUB
USERSUSERS
Server: www.jma.duq.edu
DoeJones Gibbs Pub
JMA308
inde
x.ht
m
http://www.jma.duq.edu/users/gibbs/pub/jma308/index.htmhttp://www.jma.duq.edu/users/gibbs/pub/jma308/index.htm
Make JMA308/545 folder and test page
Learn from what you encounter in the real world.
Look around for examples that can apply to your designs.
Signal failure
Source: http://noisydecentgraphics.typepad.com/design/examples_of_bad_communication/page/2/
Signal failure
Source: http://noisydecentgraphics.typepad.com/design/examples_of_bad_communication/page/2/
Bad usability
Source: http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/
Bad usability
Source: http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/
If function is to push, then why do you need handle?
IS IT EASY TO DESIGN INTERFACES?
What do you think happens here?
What do you think happens here?
Go Right for:
•Daily A & B•Shuttles•Taxis•Parking•Door to Door•Rental Car
Is it easy to design interfaces?
Let’s see a simple interface A doorA couple simple functions,
open and close
Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen
How does this door open?
Door number 1.
Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen
How does this door open?
Door number 2.
Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen
Door #1
Door number 1 - again.
Door number 2 - again.
Door #2
How does this door open?
Door number 3.
No instructions needed.
Door number 3.
The door affords the act of pushing. We know to push outward by looking at it.
Affordance!
The design of the control tells us how to use it
Door number 3.
The door affords the act of pushing. We know to push outward by looking at it.
Affordance!
Clues about functionality
Design interfaces
Instructions for simple tasks = Failure Door operation is simple – keep it simple. The door design needs:
VisibilityActions should be obviousDesign gives clues about functionality - Affordance
Interfaces
We often use things with which people are familiar to help them understand how controls can be used in the digital world.
Interfaces
Command prompt?
Direct Manipulation?
Reduces Cognitive load
OPENOPEN
Which of the following two items most looks like a button? Why?
Which of the following two items most looks like a button? Why?
Digital buttons look like physical buttons so we more easily understand their purpose and function.
Digital buttons look like physical buttons so we more easily understand their purpose and function.
Digital buttons look like physical buttons so we more easily understand their purpose and function.
• Physical design – raise• Action – press and release and something happens
Why not?
Why not like this?
Digital version.
Design interfaces
Think about interfaces that implement web search.
Evaluate from the perspective of knowing where and how to enter a search query.
We know what to do – minimalist design.
About two years ago, when I searched CNN, I got Web-wide results?
But I wanted to search CNN.
Don’t make me think!
So what’s the big deal?
Don’t make me think!
People search CNN, got web results, “I don’t want to search the Web. I want CNN.”, they tried again, same result, “Something is wrong”, went back to browsing or gave up.
Don’t make me think!
• Users spend 27 seconds on a Web page. • Users spend 1 minute 49 sec on a site.
Nielsen & Loranger, 2006
• They won’t read much.• They scan the pages.• If it’s hard they are less likely to use it.
• Limited amount of time to convey message.
•Don’t waste time by making people think about the interface.
• CNN News is now the default
Krug’s Thoughts
The truth about the right way to design Web sites…there is no RIGHT way to design sites. It’s a complicated process and the right answer to most of the questions people ask is “it depends”
Steve Krug, 2006
Krug’s Thoughts
1. Don’t make me think. If something is hard to use, we just don’t use it as much.
2. A page should be self-evident
3. People don’t read they scan pages
4. We satisfice
5. Use Conventions
Krug’s Thoughts When you look at a page, it should be self-
evident, its purpose must be obvious.
Users should know what it is and how to use it without thinking about it too much.
Pages have to work at a glance.
Try to eliminate as many questions as possible.
Source: Steve Krug, 2006, p.12
Try to eliminate as many questions as possible.
Source: Steve Krug, 2006, p.13
Some things that make us think?
Great! I can post my resume by clicking “Get Started”. I wonder why it’s a link and not a button like Search Jobs Now.
I saw Post Your Resume and Get Started
Wait? I clicked “Get
Started” to post my
Resume. I don’t want to
create an account. I
must be in the wrong
place.
This says nothing about
uploading a resume.
I want to keep shopping so I’ll click CONTINUE SHOPPING.
www.homedepot.com
The popup is informational. Right? When I click CONTINUE SHOPPING again nothing happens.
www.homedepot.com
Krug’s Thoughts People don’t read they scan pages
We design for this...
We think people read like this...
But they probably see this…
F-Shaped Pattern For Reading Web ContentEyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
(Nielsen, 2006)
Source: http://www.useit.com/alertbox/reading_pattern.html
Krug’s Thoughts We satisfice – people often don’t make
logical or the best choices – they do what works for them – to get by.
How much effort will users put into learning your interface? Not much?
Krug’s Thoughts Satisfice – instead of clicking the object
built in by the designer, I clicked Back.
Krug’s Thoughts Satisfice – instead of clicking the object
built in by the designer, I clicked Back.Be prepared -people don’t always use your site as you intended it to be used.
Krug’s Thoughts
Navigation isn’t just a feature of a web site, it is the web site, in the same way that the building, the shelves, and the cash registers are at Sears. Without it, there’s no there there.
—Steve Krug
Use Conventions: All web navigation must answer these questions: Where am I? What’s here? Where have I been? Where can I go next? Where's the Home Page? What’s most important?
Conventional:• Box• Label• Button Search or Go
Proximity to Pull-down suggests search functions in a similar manner
Krug’s Thoughts
Use expected conventions – deviating from them can be problematic.
Usually:• Box• Label• Button Search of Go
Proximity to Pull-down suggests search functions in a similar manner
http://www.iit.edu/arch/
Krug’s Thoughts
Source: http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
Where users expect to find standard page components
Shaikh & Lenz, 2006
Website examples
Let’s look at a few websites.
Let’s look at a few sites http://www.sonicdrivein.com/home.jsp#/home
Let’s look at a few sites http://www.laeyeworks.com/ (eye glasses)
Enter site confusing, navigation
Let’s look at a few sites http://www.cafeintl.net/
3D, Identity
Let’s look at a few sites http://lesailes.hermes.com/us/en/
Navigation
Let’s look at a few sites
http://www.staples.com (text size)
http://www.juliegarwood.com/(What’s this site about?)
Design interfaces: Examples
http://www.zincbistroaz.com/
Can you tell what it’s about? Mystery meat
Design interfaces: Examples
http://www.bicsportsurfboards.com/
Can you tell what it’s about?
Design interfaces: Examples
http://www.marshill.org/
Can you tell what it’s about?
Design interfaces: Examples
http://www.3cgraphics.com/
What is it about?What’s good/bad?
Design interfaces: Examples
http://www.3cgraphics.com/
Lack of focal point on the page Too many pictures
When people arrive at your site it's because they've made a commitment. They've clicked a link or an ad and now they are at your site so you don't have to try to seduce them. Let them in your site.
Breaks up flow
Other examples
Design interfaces: Examples
http://www.montblanc.com/
Design interfaces: Examples
Is there a boutique in Chicago (what is the phone number, address and hours)?
This is a timed exercise.
Design interfaces: Examples
Find a Montblanc Starwalker Black Rubber & Platinum, Fountain Pen.
Find EYEWEAR: Montblanc Ladies Collection Ipanema Graded black, gray pattern laminated into white acetate frame.