interface design
Download
Skip this Video
Download Presentation
Interface design

Loading in 2 Seconds...

play fullscreen
1 / 63

Interface design - PowerPoint PPT Presentation


  • 413 Views
  • Uploaded on

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?. What do you think happens here?. Is it easy to design interfaces?.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Interface design' - Mia_John


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
interface design

Interface design

Multimedia and Web

today s objectives
Today’s Objectives
  • Design thoughts
  • Defined User Interface Design
  • Introduce User-Center Design
  • Check Web accounts
  • FTPing
is it easy to design interfaces5
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

slide6

Door number 1.

How does this door open?

Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

slide7

Door number 2.

How does this door open?

Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

slide10

Door number 3.

How does this door open?

slide11

Door number 3.

The door affords the act of pushing. We know to push outward by looking at it.

Affordance!

No instructions needed.

slide12

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
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
Interfaces

We often use things with which people are familiar to help them understand how controls can be used in the digital world.

slide15

Interfaces

Direct Manipulation?

Reduces cognitive load

Command prompt?

slide19

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
slide21

Why not like this?

Digital version.

design interfaces22
Design interfaces
  • Think about interfaces that implement web search.
  • Evaluate from the perspective of knowing where and how to enter a search query.
slide24

About two years ago, when I searched CNN I got Web-wide results?

But I wanted to search CNN.

slide25

So what’s the big deal?

Don’t make me think!

slide26

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!

slide27

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!

slide28

Limited amount of time to convey message.

  • Don’t waste time by making people think about the design.
krug s thoughts
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 thoughts31
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 thoughts32
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
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 possible34
When creating sites, our job is to try to eliminate as many questions as possible.

Source: Steve Krug, 2006, p.13

slide36

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

slide37

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.

slide39

The popup is informational. Right? When I click CONTINUE SHOPPING again nothing happens.

www.homedepot.com

krug s thoughts40
Krug’s Thoughts

People don’t read they scan pages

krug s thoughts46
Krug’s Thoughts

We satisfice – people often don’t make logical or the best choices – they do what works for them.

krug s thoughts47
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
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?
slide49

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
slide50

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
slide51

Search

Navigation

Clickable Logo

ADs

Link to content

Conventions

website examples

Website examples

Let’s look at a few websites.

let s look at a few sites
Let’s look at a few sites

http://www.sonicdrivein.com/home.jsp#/home

http://www.laeyeworks.com/ (eye glasses)

Enter site confusing, navigation, mystery meat

http://www.cafeintl.net/

3D, Identity

http://lesailes.hermes.com/us/en/

Navigation, self evident?

let s look at a few sites54
Let’s look at a few sites

http://www.staples.com (text size)

http://www.juliegarwood.com/

design interfaces examples
Design interfaces: Examples
  • http://www.zincbistroaz.com/
  • Can you tell what it’s about?
  • Mystery meat
design interfaces examples56
Design interfaces: Examples
  • http://www.bicsportsurfboards.com/
  • Can you tell what it’s about?
design interfaces examples57
Design interfaces: Examples

http://www.marshill.org/

Can you tell what it’s about?

design interfaces examples58
Design interfaces: Examples
  • http://www.3cgraphics.com/
    • What is it about?
    • What’s good/bad?
design interfaces examples59
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.

slide60

Other examples

Breaks up flow

design interfaces examples61
Design interfaces: Examples
  • http://www.montblanc.com/
design interfaces examples62
Design interfaces: Examples
  • Is there a boutique in Chicago (what is the phone number, address and hours)?
  • This is a timed exercise.
design interfaces examples63
Design interfaces: Examples
  • Find a Montblanc Starwalker Metal & rubber Rubber, Black Fountain Pen.
  • Find EYEWEAR: Montblanc Ladies Collection Cancun, White
ad