Web DesignAnnouncementsWhy?Want to Build ThisOr ThisBut Not ThisWeb Design ProcessIn Context of TCUIDCompared to GUI designPowerPoint PresentationElicitationAnalysisAnalysis (cont.)Example 1Example 2Example 3Early DesignSlide 18Slide 19Slide 20Evaluate Early DesignLate DesignSlide 23Evaluate Functional PrototypeProductionProject TeamProject Team (cont.)Notes on the Design ProcessDesigners Need Good ToolsTake Home ExerciseSlide 31Web Designcs414spring 2007Announcements•Project status due Friday (submit pdf)Why?•You will likely be involved in Web design•You have many of the skills necessary•Understand similarities and differences between GUI design and web site design•Follow a quality set of Web guidelines–www.useit.com is a good place to startWant to Build ThisOr ThisBut Not ThisWeb Design Process•Analysis–identify users, information needs, and tasks–develop, collect, and organize content•Design–build, evaluate, iterate, …•Production–build high-fidelity representationsIn Context of TCUIDAnalysis Early Design Late Design Implementation DeploymentGoalsMethodsArtifactsExplore design spacePaper prototypesTask scenariosRefine selected designEmpirical studyUI guidelinesFunctional testFunctional prototypeImplement and integrateEmpirical studyUI guidelinesFunctional testFunctionalinterface & systemGather requirements for next releaseField studyCritical incident walkthroughsInterviews and surveysUsability reportContextual inquirySurveysObservationsInterviewsTask analysisUser descriptionsAffinity diagramsDesign briefTask descriptionsIdentify:Usability goalsContentUsers & tasksSketching & brainstormingCognitive walkthroughGOMSHeuristic evaluationAction analysisCompared to GUI design•Similarities–design process and evaluation techniques•Differences–emphasizes information seeking–emphasizes navigation and search behavior–emphasizes visual communication–uses page metaphor and mainly hyperlinksElicitation•Elicit communicative goals of client–assess whether web is right medium•Define project scope–estimate how much content, time, and cost•Identify usability goals–how to evaluate success of projectAnalysis•Analyze users–age group, skill level, access, information needs•Analyze tasks–understand what content users want and need–understand how users get that content todayAnalysis (cont.)•Develop, collect, and organize content–information architecture•Structure information–write an information item on a post it, paste on a wall, and iteratively refine the structure–sketch a tree structure where each node is an information item•Capture history as structure evolvesExample 1[Newman and Landay, 1999]Example 2- Beyer and HoltzblattExample 3Early Design•Sketch navigation template–primary and secondary navigation•Sketch layout for main page and a few second and third level pages•Sketch scenarios for primary tasks- Newman and LandayEvaluate Early Design•Cognitive walkthrough•Heuristic evaluation•Formative evaluation•GOMS or action analysisLate Design•Mockup interaction scenarios in HTML–not entire site, just the main parts•Use prototype to communicate behavior–navigation, search, registration, ordering sequence, etc.•Gain feedback from team and client•Use a basis for empirical user study- Newman and LandayEvaluate Functional Prototype•Empirical user studyProduction•Develop each page for the entire site•Conduct final usability tests•Refine as necessary and deploy•HTML is simple, but programming a large site takes time, skill, and effortProject Team•Project manager interfaces with client, defines scope, assigns milestones•Information architect develops information structure (information design)•Graphic designer helps with information design, defines visual design & navigationProject Team (cont.)•Developer provides feedback on feasibility and develops the code•One person may fill more than one role and fill different roles on different teamsNotes on the Design Process •Short timelines and small budgets–important to communicate what can be achieved•Client must “sign-off” after each iteration–must communicate effectively•Client often does not understand Web design, feels like an outsider looking in–design team should go to client•Perceived as “simple” and “low-investment”Designers Need Good Tools•Designers feel pressure to use computer-based tools early in the design process–short timelines require rapid design–get from concept to prototype quickly–must show clients something that looks “professional”•Using computer tools hinders creativity–spend too little time exploring design alternatives and refinements (linear working interface)•Develop computer-based tools that better support the early design processTake Home Exercise•Inspect ACM SIGCHI Conference website–http://sigchi.org/chi2006/•Think about the process that a design team went through to develop this site–who are the target users?–what tasks will those users perform?–how was information collected and organized?–what do you think of the navigation scheme?Take Home Exercise•Read Nielsen’s Top Ten Web Usability
View Full Document
Unlocking...