Interface design Multimedia and Web
Today’s Objectives • Design thoughts • Defined User Interface Design • Introduce User-Center Design • Check Web accounts • FTPing
Is it easy to design interfaces? • Let’s see a simple interface • A door • A couple simple functions, open and close Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen
Door number 1. How does this door open? Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen
Door number 2. How does this door open? Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen
Door number 1 - again. Door #1
Door number 2 - again. Door #2
Door number 3. How does this door open?
Door number 3. The door affords the act of pushing. We know to push outward by looking at it. Affordance! No instructions needed.
Door number 3. The door affords the act of pushing. We know to push outward by looking at it. Affordance! Clues about functionality The design of the control tells us how to use it
Design interfaces • Instructions needed for simple things = Failure • Door operation is simple - should be kept simple. • The door design needs: • Visibility • Actions should be obvious • Design should gives clues about functionality
Interfaces We often use things with which people are familiar to help them understand how controls can be used in the digital world.
Interfaces Direct Manipulation? Reduces cognitive load Command prompt?
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 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.
About two years ago, when I searched CNN I got Web-wide results? But I wanted to search CNN.
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”, they tried again, same results, “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 • I won’t read much. • I scan the pages. • If it’s hard I’m less likely to use it. Don’t make me think!
Limited amount of time to convey message. • Don’t waste time by making people think about the design.
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 Don’t make me think. If something is hard to use, we just don’t use it as much. A page should be self-evident People don’t read they scan pages We satisfice 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.
When creating sites, our job is to try to eliminate as many questions as possible. Source: Steve Krug, 2006, p.12
When creating sites, our job is to try to eliminate as many questions as possible. Source: Steve Krug, 2006, p.13
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
Krug’s Thoughts We satisfice – people often don’t make logical or the best choices – they do what works for them.
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
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?
Krug’s Thoughts Proximity to Pull-down suggests search functions in a similar manner Use expected conventions – deviating from them can be problematic. • Conventional: • Box • Label • Button Search or Go
Krug’s Thoughts Proximity to Pull-down suggests search functions in a similar manner http://www.iit.edu/arch/ • Usually: • Box • Label • Button Search of Go