The rest of the semester will be focused on the BIG project (a web application designed as a group). Web application is different than a website. It delivers functionality to a user over an the web. It is interaction-based, more than just information-based.
User Centered Design (UCD) Process: Early focus on users and tasks, Well-defined process, Iterative design, Usefulness (user goals), Ease of use, Learnability, Overall satisfaction. User Experience (UX): Overall experience and level of satisfaction with a given product, system or environment. Human - machine (e.g., calculator). Human - computer (e.g., desktop application, PDA). Human - environment (e.g., real, virtual).
Project: design a class website for teachers/students. Steps: Requirements, conceptual design, mockups & prototypes, production, launch. Within each of these steps, we will be doing evaluation.
Today’s class will focus on requirements analysis. (Phase 1) Purpose/problem: formulate design problem; research & define potential users: user interviews, surveys, research, observation; determine context of use & platform; evaluate existing and competing designs: competitive analysis, heuristic analysis; detail project goals and parameters. EVALUATION.
Phase 2: conceptual design: work out functionality (what the product does), use cases, task analyses, information architecture. EVALUATION.
Phase 3: Mockups and Prototypes: Visual representations (mockups), Interactive representations (prototypes), Produced rapidly, evaluated, refined, evaluated again, etc., Paper prototyping, wire frames, User testing, focus groups, heuristic analysis. EVALUATION.
Phase 4: Production: Final visual design established, Data entry, image creation & software coding, Final product created, Quality assurance (QA), user testing, field testing (does it work the way it’s designed to?). EVALUATION.
Phase 5: Launch: Final testing, Product made live, Verify site correctness. EVALUATION.
Good Design: example: iPod & iTunes. Design Pyramid: Understanding → Vision → Requirements → Design.
“The design we can see and touch is just the tip of the iceberg. It is supported by distinct layers of information and prerequisite decisions.”
So Phase 1, Requirements analysis: Understand the problem to solve. Research target audience. Define context of use. Define target platforms. User needs analysis. Perform competitive analysis. Summarize application objectives, features & functions.
Define Target Audience & Purpose (WHY): First step in any design process. Figure out who you want to reach, and WHY. Define them as precisely as possible. Age, gender, nationality, income level, education, occupation, computer experience, etc. [In class, groups coming up with the description…]
Research Target Audience: Learn as much as you can about your audience. Census Bureau. Industry analyses. Survey results. Focus groups. Interviews. Context of Use: Where and when will this application be used? Accessed from home computer in the evenings? Accessed from iPhone on BART during commuter rush hour? Define Target Platforms: Which browsers will our users use? Mozilla/Firefox, Internet Explorer, Safari, cellphone browsers, text-only browsers, others? Which versions of these browsers will they use? What operating systems will they use? What percent of users are likely to use which browsers/versions/platforms? [In class, groups coming up with description…]
Understanding Browser Differences: People use different browsers and platforms. People may have older versions of browsers. Screen resolution. Browsers can have custom settings. Fonts (face, size), Link colors, Image loading, Plug-ins, Scripting, Pop-ups, Others. Browsers deal with web standards differently. CSS1, CSS2, XML, HTML, XHTML, JavaScript, PNG, etc. Comparisons (Safari vs Mozilla vs IE) Check out: http://weblogs.mozillazine.org/hyatt/ and http://www.icab.de/test.html.
What are web standards? The set of standards outlined by the W3C recommendations at: www.w3.org. These include (but are not limited to) specifications about: HTML, XHTML, CSS, PNG, Accessibility standards, XML, XSL and XSLT. Why do I care about standards? Speed of development: Validating code, One target for coding. Simplify maintenance: Separation of content and design (CSS), Logical markup. More access, Access by the disabled, Alternative browsers and platforms. Smaller sites (file sizes), Reduced bandwidth costs, Smaller, reusable code. Take advantage of browser cache. Improved user experience
Web Standards: The Web Standards Project, The World Wide Web Consortium.
User Personas: Build personas for 3 to 5 representative users from your target audience, More diverse audiences need more personas, Conduct interviews and/or surveys using real people whenever possible, Get their permission, Protect their privacy when appropriate, Have them review the data. Photo of user (Should be in the same environment they will use the application (or product). (Photo of Joe the Plumber). User profile data - demographics: Age, Gender, Occupation, Education, Income, Work Hours, Disabilities, Computer, Browser, Browser settings, Network, Technical Skill. User scenario: Typical schedule for your Persona. Sketch or photo of user on location (using a website). See example in Chapter 2
Example schedule: What are their work hours? How do they get to work? When do they use the site? When do they use other sites? What do they do with this web application? Why is it important? How do interactions with others influence their use of the site? What are the relevant exceptions to these events? Context of Use: In what environment they will use the application or product? Are they alone? With others? Does it look noisy? Quiet? How is the lighting? Is the user doing other things? Stakeholders: Who are the stakeholders? Anyone whose affected by the existence of the product or application. End-user, business, partners. What are the business goals? Investment for the long run vs. quick ad-hoc patch. Use this information to generate your project and application/product requirements.
Summarize Application Objectives & Goals: Questions your objectives need to answer: Why are we creating this application? Who is it for & what do they need to do on the application? What are the initial functional features of the application (broad view of what the user will be able to do)? What are the usability objectives of the application?
Competitive Analysis: Find some competing sites that are similar in: Target audience, Platforms, Scope of features, Price, Unique Selling Point. Analyze for strengths & weaknesses: Analyze sites for usability and interface ideas. What categories, labels, features & processes do they use? Steal the good ideas, avoid the mistakes. Copyright law protects Look and feel, Exact wording, Images.
Final project: In class tasks: Choose a group leader, Decide on when to meet outside of class, Further define your target audience, purpose and target platform, Begin competitive analysis. Homework As a group: Conduct a Requirements Analysis and create a report for your group project (BIG project). Define the problem to solve. Research target audience. Define context of use & target platforms. Summarize project & product/application objectives. Perform Competitive Analysis. Due start of class, next week. Reading Assignment: Reading: Read chapter 4 in textbook. SSNiF Analysis Part 1: Introduction, SSNiF Analysis Part 2: How it fits into the product creation process, SSNiF Analysis Part 3: Tips for SSNiFs
Buttons and t-shirts
Robots are everywhere. Enough to build an army. I must record them all.
