interface design l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Interface design PowerPoint Presentation
Download Presentation
Interface design

Loading in 2 Seconds...

play fullscreen
1 / 63

Interface design - PowerPoint PPT Presentation


  • 447 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

Interface design


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
    1. Interface design Multimedia and Web

    2. Today’s Objectives • Design thoughts • Defined User Interface Design • Introduce User-Center Design • Check Web accounts • FTPing

    3. Is it easy to design interfaces?

    4. What do you think happens here?

    5. 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

    6. Door number 1. How does this door open? Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

    7. Door number 2. How does this door open? Materials by CS 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

    8. Door number 1 - again. Door #1

    9. Door number 2 - again. Door #2

    10. Door number 3. How does this door open?

    11. Door number 3. The door affords the act of pushing. We know to push outward by looking at it. Affordance! No instructions needed.

    12. 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

    13. 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

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

    15. Interfaces Direct Manipulation? Reduces cognitive load Command prompt?

    16. Which of the following two items most looks like a button? Why? OPEN

    17. Which of the following two items most looks like a button? Why?

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

    19. 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

    20. Why not?

    21. Why not like this? Digital version.

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

    23. We know what to do – minimalist design.

    24. About two years ago, when I searched CNN I got Web-wide results? But I wanted to search CNN.

    25. So what’s the big deal? Don’t make me think!

    26. 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!

    27. 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!

    28. Limited amount of time to convey message. • Don’t waste time by making people think about the design.

    29. CNN News is now the default (08-18-10)

    30. 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

    31. 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

    32. 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.

    33. When creating sites, our job is to try to eliminate as many questions as possible. Source: Steve Krug, 2006, p.12

    34. When creating sites, our job is to try to eliminate as many questions as possible. Source: Steve Krug, 2006, p.13

    35. Some things that make us think?

    36. 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

    37. 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.

    38. I want to keep shopping so I’ll click CONTINUE SHOPPING. www.homedepot.com

    39. The popup is informational. Right? When I click CONTINUE SHOPPING again nothing happens. www.homedepot.com

    40. Krug’s Thoughts People don’t read they scan pages

    41. We design for this...

    42. We think people read like this...

    43. But they probably see this…

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

    45. 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

    46. 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?

    47. 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

    48. 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