1 / 92

Interface design

Interface design. Multimedia and Web. Today’s Objectives. Review: Defining Interface Design HTML Introduce User Research User-Center Design Design Activity Project portfolio page. Review: Defining Interface Design. Defining ID: What is an interface?.

odetta
Télécharger la présentation

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Interface design Multimedia and Web

  2. Today’s Objectives • Review: Defining Interface Design • HTML • Introduce User Research • User-Center Design • Design Activity • Project portfolio page

  3. Review: Defining Interface Design

  4. Defining ID: What is an interface? • An interface is a representation of a problem/task • A well-designed interface can transform a complex task, making it much simpler

  5. Defining ID: What is an interface? • Communication Channel – something that mediates between the user and the computer. • Interface mediates the conversation a person has with a digital product.

  6. Defining ID • What is a good interface? • A good ID encourages an easy, natural, and engaging interaction between users and system. • BUT…

  7. Defining ID • Easy, natural, good, bad, and engaging are subjective. • We need to be concerned with whether a user interface is good, bad, or poor, etc. in relation to usability.

  8. Defining ID • What’s usability? • … extent to which a product can be used by specified users to achieve specified goals with effectiveness. (BSI, 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

  9. Defining ID: What is an interface? Interface design doesn’t start with pictures. It starts with understanding of people. (Tidwell, J. 2011, p.2)

  10. Defining ID: What is an interface? Step 1 of ID: Figure out what users are really trying to accomplish. Art of interface design lies in solving the right problem.

  11. Defining ID: What is an interface? When we think of ID in these terms • Solving the right problem. • Communication channel • Mediates between user and computer. • Representation of problem/task …versus product, we must think of & begin with users. Product

  12. The 8 golden rules of interface design • Strive for consistency • Cater to universal usability • Offer informative feedback • Design dialogs to yield closure • Prevent errors • Permit easy reversal of actions • Support internal locus of control (Sort) • Reduce short term memory load

  13. HTML Quick introduction

  14. HTML Allows you to structure documents and assign meaning to content. Used for describing meaning of content.

  15. <h1> Introduction</h1> <p>In the summer of 2009, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. <q>“This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations.”</q> From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity.</p> <p>I am seeking funds to assist me in further developing an intelligent online tool that provides <strong>semantic</strong> as well as temporal analyses of online educational conversations. </p> <h2> Educational Conversations</h2>

  16. Visual vs. Structural • Use HTML to: • Structure document • Meaningful markup • Use CSS for styling

  17. HTML 5 Emphasizes semantics. Removes some presentational elements. Introduces new elements such as header, footer, article, sections, nav. Use elements that best describe your content. Styling is done with CSS

  18. HTML 5 | Why it’s important. Improved accessibility Improved interoperability – content being available on assistive technologies and on mobile and tablet devices Improves SEO Efficient coding & improved maintenance.

  19. HTML 5 Doc Type <!doctype html> Ensure browsers render properly and let’s HTML validators know you are using HTML 5 syntax.

  20. HTML HEAD – information about the Web page. BODY – the actual contents of the Web page HTML: Document structure

  21. <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> HTML: Document structure

  22. HTML 5: Document structure <!doctype html> <html> <head><title> Hello World, it's our first page!</title></head> <body> <section> <article> <nav></nav> <p>Hello, world!</p> </article> </section> </body> </html>

  23. HTML 5 | News content elements Section Article Nav Header Aside Footer

  24. Header | Hgroup | Example <header> <hgroup> <h1>Interface design</h1> <h2>Interface patterns</h2> </hrgoup> </header>

  25. <nav> < </nav> <section> <header><h2>By the Sea></h2> </section> <aside> <section> <header><h3>Categories</h3> </section> <section> <header><h3>Archives</h3> </section> </aside> <section> <article> <header><h2>This is the title…</h2> </article> </section>

  26. <nav> </nav> <section> <header><h2>By the Sea></h2></header> </section> <aside> <section> <header> <h3>Categories</h3> </header> </section> <section> <header> <h3>Archives</h3> </header> </section> </aside> <section> <article> <header><h2>This is the title…</h2></header> </article> </section>

  27. Progressive enhancements Provide universal access – start with clear content and well-structured semantic HTML markup. Strict separation of layout and presentation. Layer advanced behavior and styling but always ensure accessible/universal access. (Arker, T., Toland, P. Jehl, S., & Wachs, M. 2010, p. 8)

  28. Offer informative feedback

  29. Offer informative feedback

  30. Cater to universal usability

  31. Design dialogs to yield closure

  32. Support internal locus of control Permit users to be in control of interface.

  33. Permit easy reversal of actions Easily remove item from cart.

  34. User Research Read: Chapter 2, Designing interfaces in Blackboard.

  35. User Research It’s challenging to understand the real issues that trigger users’ interactions with a website.

  36. Think of a travel site… If these people are users, how will that impact your design?

  37. User Research Empirical discovery - the only really good way to obtain information about users. Characterize kinds of people who will be using your design. Go out and meet them.

  38. User Research Each user is unique - one person finds something difficult, the next one won’t. Figure out what’s generally true about your users. What are common behavior patterns.

  39. User Research - Find out: Users’ goals in using the site Tasks they undertake to achieve goals Language and words they use Skill using software similar to what you’re designing Attitudes toward the kind of thing you’re designing

  40. User Research Describe audience in terms of how and why they might use your site. Without valid description of user, design will likely not proceed well.

  41. User Research - methods Direct observation Case studies Surveys Personas - This is a design technique that “models” the target audiences.

  42. Thinking about your interface. • Think of your interface design as a conversation. You modify your conversation based on the person with whom you are speaking: • specific vocabulary you use • level of knowledge • body language, etc. • Video

More Related