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

Loading in 2 Seconds...

play fullscreen
1 / 87

Interface design - PowerPoint PPT Presentation


  • 94 Views
  • Updated on

Interface design. An introduction. JMA 308/545 – Class Web Site. Web site. http://www.jma.duq.edu/classes/gibbs/jma308/index.htm. Media Site Live. Today’s Objectives. Our Server, check accounts Designing interfaces- things to think about Krug’s Thoughts: things that make us think

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 An introduction

    2. JMA 308/545 – Class Web Site • Web site http://www.jma.duq.edu/classes/gibbs/jma308/index.htm • Media Site Live

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

    4. Our Server How to access the server

    5. Our Server www.jma.duq.edu • 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…

    6. How do I access the server? • Access from either CH345 and CH205 • Start >> Computer (Z: Drive) OR \\jma1\users\username

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

    8. The User Folder And The PUB folder

    9. www.jma.duq.edu USERS

    10. PUB www.jma.duq.edu Your Space USERS John Doe Folder Folder File File File Folder File

    11. Users PUB My user folder Gibbs www.jma.duq.edu All files for Web must be in PUB Folder File File Folder File File

    12. Pub Doe Jones Gibbs http://www.jma.duq.edu/users/gibbs/pub/jma308/index.htm USERS index.htm JMA308 Server: www.jma.duq.edu

    13. Make JMA308/545 folder and test page

    14. Learn from what you encounter in the real world. Look around for examples that can apply to your designs.

    15. Signal failure Source: http://noisydecentgraphics.typepad.com/design/examples_of_bad_communication/page/2/

    16. Signal failure Source: http://noisydecentgraphics.typepad.com/design/examples_of_bad_communication/page/2/

    17. Bad usability Source: http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/

    18. Bad usability If function is to push, then why do you need handle? Source: http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/

    19. Is it easy to design interfaces?

    20. What do you think happens here?

    21. What do you think happens here? • Go Right for: • Daily A & B • Shuttles • Taxis • Parking • Door to Door • Rental Car

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

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

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

    25. Door number 1 - again. Door #1

    26. Door number 2 - again. Door #2

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

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

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

    30. Design interfaces • Instructions for simple tasks = Failure • Door operation is simple – keep it simple. • The door design needs: • Visibility • Actions should be obvious • Design gives clues about functionality - Affordance

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

    32. Interfaces Direct Manipulation? Reduces Cognitive load Command prompt?

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

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

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

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

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

    38. Why not?

    39. Why not like this? Digital version.

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

    41. We know what to do – minimalist design.

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

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

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

    45. 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. Don’t make me think!

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

    47. CNN News is now the default

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

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

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