Interface design
Download
1 / 63

Interface design - PowerPoint PPT Presentation


  • 413 Views
  • Updated 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 l.jpg

Interface design

Multimedia and Web


Today s objectives l.jpg
Today’s Objectives

  • Design thoughts

  • Defined User Interface Design

  • Introduce User-Center Design

  • Check Web accounts

  • FTPing




Is it easy to design interfaces5 l.jpg
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 l.jpg

Door number 1.

How does this door open?

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


Slide7 l.jpg

Door number 2.

How does this door open?

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




Slide10 l.jpg

Door number 3.

How does this door open?


Slide11 l.jpg

Door number 3.

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

Affordance!

No instructions needed.


Slide12 l.jpg

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 l.jpg
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 l.jpg
Interfaces

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


Slide15 l.jpg

Interfaces

Direct Manipulation?

Reduces cognitive load

Command prompt?




Slide18 l.jpg

Digital buttons look like physical buttons so we more easily understand their purpose and function.


Slide19 l.jpg

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


Slide20 l.jpg

Why not? understand their purpose and function.


Slide21 l.jpg

Why not like this? understand their purpose and function.

Digital version.


Design interfaces22 l.jpg
Design interfaces understand their purpose and function.

  • Think about interfaces that implement web search.

  • Evaluate from the perspective of knowing where and how to enter a search query.


Slide23 l.jpg

We know what to do – minimalist design. understand their purpose and function.


Slide24 l.jpg

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

But I wanted to search CNN.


Slide25 l.jpg

So what’s the big deal? results?

Don’t make me think!


Slide26 l.jpg

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 l.jpg

  • Users spend search the Web”, they tried again, same results, “Something is wrong”, went back to browsing or gave up.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 l.jpg

  • Limited amount of time to convey message. search the Web”, they tried again, same results, “Something is wrong”, went back to browsing or gave up.

  • Don’t waste time by making people think about the design.


Slide29 l.jpg


Krug s thoughts l.jpg
Krug’s Thoughts search the Web”, they tried again, same results, “Something is wrong”, went back to browsing or gave up.

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 l.jpg
Krug’s Thoughts search the Web”, they tried again, same results, “Something is wrong”, went back to browsing or gave up.

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 l.jpg
Krug’s Thoughts search the Web”, they tried again, same results, “Something is wrong”, went back to browsing or gave up.

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 l.jpg
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 l.jpg
When creating sites, our job is to try to eliminate as many questions as possible.

Source: Steve Krug, 2006, p.13


Some things that make us think l.jpg
Some things that make us think? questions as possible.


Slide36 l.jpg

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 l.jpg

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 l.jpg
I want to keep shopping so I’ll click CONTINUE SHOPPING. don’t want to create an account. I must be in the wrong place.

www.homedepot.com


Slide39 l.jpg

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

www.homedepot.com


Krug s thoughts40 l.jpg
Krug’s Thoughts SHOPPING again nothing happens.

People don’t read they scan pages


Slide41 l.jpg

We design for this... SHOPPING again nothing happens.


Slide43 l.jpg

We think people read like this... SHOPPING again nothing happens.


Slide45 l.jpg

But they probably see this… SHOPPING again nothing happens.


Krug s thoughts46 l.jpg
Krug’s Thoughts SHOPPING again nothing happens.

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


Krug s thoughts47 l.jpg
Krug’s Thoughts SHOPPING again nothing happens.

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 l.jpg
All web navigation must answer these questions: SHOPPING again nothing happens.

  • 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 l.jpg

Krug’s Thoughts SHOPPING again nothing happens.

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 l.jpg

Krug’s Thoughts SHOPPING again nothing happens.

Proximity to Pull-down suggests search functions in a similar manner

http://www.iit.edu/arch/

  • Usually:

  • Box

  • Label

  • Button Search of Go


Slide51 l.jpg

Search SHOPPING again nothing happens.

Navigation

Clickable Logo

ADs

Link to content

Conventions


Website examples l.jpg

Website examples SHOPPING again nothing happens.

Let’s look at a few websites.


Let s look at a few sites l.jpg
Let’s look at a few sites SHOPPING again nothing happens.

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 l.jpg
Let’s look at a few sites SHOPPING again nothing happens.

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

http://www.juliegarwood.com/


Design interfaces examples l.jpg
Design interfaces: Examples SHOPPING again nothing happens.

  • http://www.zincbistroaz.com/

  • Can you tell what it’s about?

  • Mystery meat


Design interfaces examples56 l.jpg
Design interfaces: Examples SHOPPING again nothing happens.

  • http://www.bicsportsurfboards.com/

  • Can you tell what it’s about?


Design interfaces examples57 l.jpg
Design interfaces: Examples SHOPPING again nothing happens.

http://www.marshill.org/

Can you tell what it’s about?


Design interfaces examples58 l.jpg
Design interfaces: Examples SHOPPING again nothing happens.

  • http://www.3cgraphics.com/

    • What is it about?

    • What’s good/bad?


Design interfaces examples59 l.jpg
Design interfaces: Examples SHOPPING again nothing happens.

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 l.jpg

Other examples SHOPPING again nothing happens.

Breaks up flow


Design interfaces examples61 l.jpg
Design interfaces: Examples SHOPPING again nothing happens.

  • http://www.montblanc.com/


Design interfaces examples62 l.jpg
Design interfaces: Examples SHOPPING again nothing happens.

  • Is there a boutique in Chicago (what is the phone number, address and hours)?

  • This is a timed exercise.


Design interfaces examples63 l.jpg
Design interfaces: Examples SHOPPING again nothing happens.

  • Find a Montblanc Starwalker Metal & rubber Rubber, Black Fountain Pen.

  • Find EYEWEAR: Montblanc Ladies Collection Cancun, White