Module 9: Audience Analysis, Usability, and Information Architecture COM 420

Similar documents
Jennifer Nip, P.Eng. Portfolio

Curtin University School of Design. Internet Usability Design 391. Chapter 1 Introduction to Usability Design. By Joel Day

Web Evaluation Report Guidelines

Unit 3. Design and the User Interface. Introduction to Multimedia Semester 1

Reading Introduction to Web Accessibility

Plunging into the waters of UX

Interaction Design. Task Analysis & Modelling

Today. Web Accessibility. No class next week. Spring Break

There are four (4) skills every Drupal editor needs to master:

Human-Computer Interaction IS4300

Human-Computer Interaction IS4300

Human-Computer Interaction IS4300

Human-Computer Interaction: An Overview. CS2190 Spring 2010

Microsoft Office OneNote 2007

Usable Privacy and Security Introduction to HCI Methods January 19, 2006 Jason Hong Notes By: Kami Vaniea

Creating accessible forms

HCI and Design SPRING 2016

evision Review Project - Engagement Simon McLean, Head of Web & IT Support Information & Data Services.

M150 -B / Unit 12. By Wawi. A good user interface design enables the user to effectively interact with the system and perform his tasks.

Overview of Today s Lecture. Analytical Evaluation / Usability Testing. ex: find a book at Amazon.ca via search

Usability. CSE 331 Spring Slides originally from Robert Miller

Cognitive Disability and Technology: Universal Design Considerations

Guide for Creating Accessible Content in D2L. Office of Distance Education. J u n e 2 1, P a g e 0 27

Want to Create Engaging Screencasts? 57 Tips to Create a Great Screencast

3Lesson 3: Web Project Management Fundamentals Objectives

Chapter 2 Web Development Overview

It is written in plain language: no jargon, nor formality. Information gets across faster when it s written in words that our users actually use.

UXD. using the elements: structure

Usability. HCI - Human Computer Interaction

Interaction Design. Ruben Kruiper

A Heuristic Evaluation of Ohiosci.org

CISC 1600 Lecture 1.4 Design, part 2. Topics: Accessibility Responsive web design Example design review

Assignment 5 is posted! Heuristic evaluation and AB testing. Heuristic Evaluation. Thursday: AB Testing

SFU CMPT week 11

Voluntary Product Accessibility Template (VPAT) ACUE Course in Effective Teaching Practice

User-Centered Analysis & Design

This exam is open book / open notes. No electronic devices are permitted.


1.1 Technical Evaluation Guidelines and Checklist:

Presented by Dr. Mariah Judd February 15, 2013

The 23 Point UX Design Checklist

Font size. Tabl:e 2-4 Font Size Examples. Chapter 2.. Page Layout and Design 47. (font si ze="3"> (fo nt s ize="+l"> (font size="-l">

1D CIW: Web Design Specialist. Course Outline. CIW: Web Design Specialist Apr 2018

Testing is a very big and important topic when it comes to software development. Testing has a number of aspects that need to be considered.

COMP 388/441 HCI: 09 - Balancing Function and Fashion Balancing Function and Fashion

Interaction Techniques. SWE 432, Fall 2016 Design and Implementation of Software for the Web

and usability Release/www/releases/archives/facts_for_features_special_editions/ html

All Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the

Software Quality. Martin Glinz. Thomas Fritz. Lecture 7 UI Design, Usability & Testing. Many thanks to Meghan Allen and Daniel Greenblatt.

Web Design and Usability. What is usability? CSE 190 M (Web Programming) Spring 2007 University of Washington

Assignment 5 Storyboards - Individual Assignment

Fast Company Homepage This ad is very distracting and grabs the viewer attention more than the logo and navigation. It could cause the user to overloo

On the Web sun.com/aboutsun/comm_invest STAROFFICE 8 DRAW

CS3205 HCI IN SOFTWARE DEVELOPMENT PROTOTYPING STRATEGIES. Tom Horton. * Material from: Floryan (UVa) Klemmer (UCSD, was at Stanford)

Adobe Web Communication using Dreamweaver CS5 Curriculum/Certification mapping

Building the User Interface: The Case for Continuous Development in an Iterative Project Environment

Interaction Design DECO1200

OrgPublisher 10.1 End User Help

NCMail: Microsoft Outlook User s Guide

Designing Web Applications: Lessons from SAS User Interface Analysts Todd Barlow, SAS Institute Inc., Cary, NC

Customize. Building a Customer Portal Using Business Portal. Microsoft Dynamics GP. White Paper

DISABILITY LAW SERVICE BEST PRACTICES FOR AN ACCESSIBLE AND USABLE WEBSITE

MIT GSL week 4 Wednesday. User Interfaces II

Announcements. Usability. Based on material by Michael Ernst, University of Washington. Outline. User Interface Hall of Shame

PowerPoint Basics: Create a Photo Slide Show

FILE ORGANIZATION. GETTING STARTED PAGE 02 Prerequisites What You Will Learn

A short introduction to. designing user-friendly interfaces

BMS2062 Introduction to Bioinformatics. Lecture outline. What is multimedia? Use of information technology and telecommunications in bioinformatics

CS 160: Evaluation. Professor John Canny Spring /15/2006 1

Strategy Conceptual Design

Applying for Jobs Online

CIW: Web Design Specialist. Course Outline. CIW: Web Design Specialist. ( Add-On ) 16 Sep 2018

InDesign. your. Resumé. a how-to guide for creating a professional resumé using InDesign

Course Outline. Department of Computing Science Faculty of Science. COMP 3450 Human Computer Interaction Design (3,1,0) Fall 2015

Agilix Buzz Accessibility Statement ( )

Coca Cola Heuristic Evaluation

User-centered design in technical communication

George Olse n Principal, Interaction by Design User interface design It s not just what you say, it s how you say it

Overview. Importance of Design. Lost in hyperspace. Site Organisation. Designing Structure. Lecture 14 Web Usability

NCMail: Microsoft Outlook User s Guide

Implementing Games User Research Processes Throughout Development: Beyond Playtesting

Why User Interface Design? What

Interactive Powerpoint. Jessica Stenzel Hunter Singleton

Getting Started with XMF Remote

User Interface Design

Introducing web-accessibility. Making night and day difference as a developer.

Oracle User Productivity Kit Content Player

Arduino IDE Friday, 26 October 2018

Diagram Based UIs in Oracle ADF

Seng310 Lecture 8. Prototyping

Knowledge Organiser Digital Information Technology. Year 10: Unit 1, User Interface, Learning Aim A, B & C

Page 1. Ideas to windows. Lecture 7: Prototyping & Evaluation. Levels of prototyping. Progressive refinement

Applying Usability to elearning

Getting Help...71 Getting help with ScreenSteps...72

Installation Guide Web Browser Method

Topics in Usability Testing

Process. Interface Design Introduction. Purpose and Goals of your Website. Module 2. Introduction

A Step-by-Step Guide to Creating More Accessible Surveys

What is interaction design? What is Interaction Design? Example of bad and good design. Goals of interaction design

Working with Health IT Systems is available under a Creative Commons Attribution-NonCommercial- ShareAlike 3.0 Unported license.

Transcription:

Module 9: Audience Analysis, Usability, and Information Architecture COM 420

Audience Analysis Needs Capabilities Without addressing these end user factors, time and money can be wasted building a site that is not functional

Audience Analysis: Documentation There are several ways to conduct an audience analysis. The most common way would be to create a survey, either electronic or paper-based, and distribute it to a sample of the population for which the site is being created. A second way would be conduct oneon-one or small group interviews with a sample from the population. These interviews not only allow you to gather some basic information about capabilities, but also give you the opportunity to gather nonverbal responses that may help you identify fears or anxieties around Web sites.

Creating a Design Document Your proposal is the start of your Design Document. Your design document should be used as a communication tool with your team. use it to outline design specifications and limitations used in the design and development of the site It is of vital importance for all designers and developers of a site to conform to the guidelines set from the audience analysis. For those who saw my HCI Lecture, you want establish "common ground" early, and maintain it (For those who didn't see Clark's Theory of Language Use).

Questions to ask During Audience Analysis... What type of Computer system / Mobile will the end user have? What type of Internet connection do the end users have (be sure to consider mobile phone data rates)? With what browser(s) and version(s) of the browser(s) do the end users view Web sites? What software or plug-ins do the end users have or use? (Flash, QuickTime, Java, etc...)? What are the computers systems settings of the end users (what is the screen resolution, is Javascript allowed, what is the size of the web cache)? Will users want to access the site from a mobile phone, tablet?

Discussion Topic You are creating a webpage that reviews applications for the ipad and iphone. What considerations does one need to make for this audience?

Tools for Audience Analysis Surveys Focus groups Interviews Expectations of the Design Document Outline design specifications Limitations Guidelines Expected costs and build times

Limitations How fast is the users connection? Most surveys indicate that a user will leave after waiting 10 secs How big can a file be on a 56K modem and not lose the user? (Yes, I know this seems dated but illustrates the point.)

Audience Analysis: Disabilities 40 million Americans have disabilities. If consistent, that would be the number of disabled worldwide 1,000,000,000. Access to education is the way out of poverty and deprivations. the disabled are often denied a chance at education

Physical Limitations Color Blindness (10% of men are red green color blind) Dyslexia As people age they make fewer subtle distinctions of color and shape Motor functions (do you needs to click and drag? can they use a keyboard)

Sites to visit Section 508 of the Rehabilitation Act Equal Access to Software and Information (EASI) Web Accessibility Initiative Accessible Rich Internet Application Suite (WAI-ARIA) W3C Web Content Accessibility Guidelines Bobby - Check Your Page for Accessibility Check Your Site for Red/Green Colorblind Users Have Your Site Read Aloud - Hear How Blind Users May Perceive Your Site (Download and Install the JAWS utility-pcs only.)

Usability and Information Architecture Usability consists of 1. Ease of Learning 2. Efficiency and Ease of Use 3. Error Frequency and Severity 4. Subjective Satisfaction 5. Structure Should Reflect Content

1. Ease of use How fast can users who have never seen the user interface before learn it sufficiently well to accomplish basic tasks? (Establish Common Ground) If this occurs automatically, you have done a great job! One way to accomplish this is to use everyday metaphors (like a table of contents) in your designs.

1. Ease of use: Continued Memorability: If users return to your site after a period of time, how quickly can they remember how to utilize your system? Navigation tools need to be kept in the same place on the screen within a site and, when possible, throughout all sites. Even little changes can slow things down, as anyone who moves from one browser to another or from one platform to another can tell you.

2. Efficiency and Ease of Use: Text Text should be easy to scan, by using: Tables of contents Headings Large type headings, smaller body text. Topic sentences Short text passages Bold or highlighted text for key words/phrases Bulleted lists Graphics for complex ideas that can be related visually

2. Efficiency and Ease of Use: GUI How important ease of use is can be seen most easily in the development of the graphical user interface (GUI) and the mouse. It is still possible to do everything on most platforms using key commands (and it can be much faster and more efficient), but it is harder to learn and has decreased in widespread use.

3. Error Frequency and Severity How often do users make errors while using the system, how serious are these errors, and how easy is it to recover from a user error? A typical example is in navigation, where users might go to a page or section they didn't really want to go to. Have you provided a way for them to realize their mistake and easily correct it?

4. Subjective Satisfaction How much does the user like using the system? This is a somewhat subjective criterion. Beyond the first items listed here, this is a matter of aesthetics and personal taste.

5. The Site's Structure Should Reflect the Site's Content The content of the site should grow out of what needs to be communicated and how users can best find and grasp that information. Form is a part of meaning, not something added after the content has been developed. The form and structure of the site sets the tone, inflects the meaning, and should clarify the purpose.

Dr. Santoro's* Usability Checklist Do users feel in control? Is the site designed so that people constantly "guess right"? Does it provide advice? Tools? Reference materials? Are they easy to find? Do users Enjoy their experience?will they come back? Why? Does it behave consistently throughout? is the Menu always in the same place? Is it visually consistent? Do users know where they are? Does the site have a personality, is it Distinctive? Does it show an understanding of how users do their work? Are response times fast enough to keep user attention? Does the user know where they are as soon as the sites opens? *My teacher(penn State).

Information Architecture Primary Goal: Accessibility Secondary Goals: maintainability, feel, and consistency Layout, labeling, navigation, and search all play a role. A good information architect minimizes the time taken to find information.

Information Architecture Guidelines 1. Who will use the Site? (sites purpose) 2. Structure should reflect the needs of the user, not the provider 3. The site structure should be as clear as possible 4. A site plan should involve those with different skills 5. Look for common industry standards 6. Look for redundancy is site architecture 7. Testing of usability should be done before release 8. How will it be maintained

Questions to ask when evaluating Navigation Where am I? Where can I go? How do I get there? How can I return to where I just was?

Discussion Topic A Dry Cleaner's wants a website to gain more business. The developers meet with the clients (the cleaners) and discuss the owners exact needs. The site is launched and the client is very happy, the site will be able to take any order. A few months pass and the owner gets many complaints from customers on how difficult the site is the use. An analysis shows users don't set options on the type of fabric and color of the clothes. What went wrong? Discuss a similar situation from your experience.

Dos and Don'ts of Navigation Reveal the structure of the site Be easily learned Remain consistent Provide feedback and help Appear in context, providing clear visual messages and obvious links Offer alternatives and shortcuts - require an economy of action and time (Fitt's Law) Leave breadcrumbs (visual clues) for backtracking (returning to a page) Avoid irrelevant links Offer clear and understandable icons and labels (Again Fitt's Law)

Types of Navigation Systems

Types of Navigation Systems Hierarchical Navigation System - A Table of Contents is a good example of this. You have main headings, subheadings, and possibly sub-sub-headings. Limited flexibility to users. One can move up and down in the hierarchy, and that's it. Global Navigation System - This version is more global, in that it complements the information hierarchy by enabling greater vertical and lateral movement throughout the entire site. Cross links have been provided, allowing users to move sideways as well as up and down. The trick here as a designer is to strike a balance between flexibility and total chaos.

Types of Navigation Systems Local Navigation Systems - A complex Web site may contain sub-sites within its structure. Jakob Nielsen defined this term as a recurrent situation in which a collection of Web pages within a larger site share a common style and navigation mechanism unique to just those pages. For example: Imagine a department store with its different sections. Each section may contain a unique arrangement because it makes sense to do so. Similarly, a music site may contain an online store to sell CDs. The online store will probably have a navigational scheme that is different from the rest of the site.

The Web Production Process 1. Pre-production (Analysis) 2. Production (Design, Development, Testing, Revision) 3. Publication (Implementation) 4. Post-publication (Evaluation)

The Web Production Process Each of these steps is essential to the success of a media project. In the pre-production or planning phase, brainstorming is followed by the development of a plan of action that carries the production through to fruition. The planning phase is followed by hands-in-the-dirt production work: the task-by-task process of producing the media in question. Then you test your media with an audience as alike to your target audience as possible, and revise your efforts based on observation of them. Publication is the process by which the media is made public, and postpublication is the cleanup, review, and examination of the project to determine its future positioning and possible future revisions, or filing it away as a job well done.

Tools of Production Storyboards Flowcharts

Storyboards should Include overall design concept style of the site Which topics go where links conceptual idea of where your images go what type, size of graphics what the layout will look like color, size, font for all text descriptions of all graphics, including files types, names, and locations relative to page description of any audio, including files types, names and locations relative to page descriptions of any video, including file types, name, locations relative to page note to programmers Other notes depending on situation

Flowcharts Consist of Three shapes 1. Square - Used to represent a display screen, use to show information to the audience 2. Diamond - used to represent some form of interaction (i.e. a user name and password form 3. Circle - used as connectors These are used to chart the users experience and choices within a site.

Tools for flowcharts and storyboards Microsoft Office Gliffy Microsoft Visio

Get into teams for your final project Come up with an idea for your final Project. Can be a business, community, or special interest topic site Discuss audience analysis for the site. What information do you need, how will you get it Describe the basic characteristics of usability and information architecture, and outline ways of ensuring both are well thought out. Summarize the basic strategies for designing good navigation systems and document your decisions Review steps in the Web production process and the associated issues, strategies, and staffing needs you will run into.