Interface design Multimedia and Web
Today’s Objectives • Review: Defining Interface Design • HTML • Introduce User Research • User-Center Design • Design Activity • Project portfolio page
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
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.
Defining ID • What is a good interface? • A good ID encourages an easy, natural, and engaging interaction between users and system. • BUT…
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.
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)
Defining ID: What is an interface? Interface design doesn’t start with pictures. It starts with understanding of people. (Tidwell, J. 2011, p.2)
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.
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
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
HTML Quick introduction
HTML Allows you to structure documents and assign meaning to content. Used for describing meaning of content.
<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>
Visual vs. Structural • Use HTML to: • Structure document • Meaningful markup • Use CSS for styling
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
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.
HTML 5 Doc Type <!doctype html> Ensure browsers render properly and let’s HTML validators know you are using HTML 5 syntax.
HTML HEAD – information about the Web page. BODY – the actual contents of the Web page HTML: Document structure
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> HTML: Document structure
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>
HTML 5 | News content elements Section Article Nav Header Aside Footer
Header | Hgroup | Example <header> <hgroup> <h1>Interface design</h1> <h2>Interface patterns</h2> </hrgoup> </header>
<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>
<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>
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)
Support internal locus of control Permit users to be in control of interface.
Permit easy reversal of actions Easily remove item from cart.
User Research Read: Chapter 2, Designing interfaces in Blackboard.
User Research It’s challenging to understand the real issues that trigger users’ interactions with a website.
Think of a travel site… If these people are users, how will that impact your design?
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.
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.
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
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.
User Research - methods Direct observation Case studies Surveys Personas - This is a design technique that “models” the target audiences.
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