1. Hanlune-learningPMAfternoon Session2:00-5:00 pmedited by Clive NGCopyright Statement NOTICE: The following presentation contains copyrighted materials.Material being used for educational purposes only. Further use is prohibited.https://sites.google.com/site/sdcliveng/1

2. Content Web Design (The Surface Plane) (visual design) About web user and design process Case study2 3. Web Design(The Surface Plane)Web user interface | Emerging trends in web design | New toolsfor web production | First Principles of Interaction Design 3 4. Web Design (The Surface Plane)The evolution of the web1989ThesimplesharingeraTheimage&tableeraThedesignintroeraThetechno-hypeeraTheusabilityeraThewebexperienceeraTheRichInternetApplicationThesocialwebera2010200519944 5. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htmlWeb Design (The Surface Plane)/ The Evolution of Web Design/1992 / text-based pageTim Berners Lee5 6. Web Design (The Surface Plane)/ The Evolution of Web Design/ 1998 /Table-based and frame set designs6 7. 7 8. 19978 9. 20019 10. Web Design/ The Evolution of Web Design/2000 / Flash-based web designsclass com.example.Greeter extends MovieClip{public function Greeter() {}public function onLoad():Void{var txtHello:TextField =this.createTextField("txtHello", 0, 0, 0, 100,100);txtHello.text = "Hello, world";}}10 11. 200111 12. 200112 13. 200413 14. 200514 15. Web Design (The Surface Plane)/ The Evolution of Web Design/ 2000 / Dynamic HTML (DHTML)15 16. Web Design (The Surface Plane)/ The Evolution of Web Design/ 2005 / CSS-Based DesignContentmanagementsystemJoomlaDrupalWordpressChangeableskinGeneratedHTMLbody{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Times New Roman";font-size:20px;}16 17. http://webhostinggeeks.com/blog/web-design-evolution/http://webdesignledger.com/inspiration/the-design-evolution-of-popular-websites17 18. Web Design (The Surface Plane)Web user interface / Fortune-500 Websites StatsFf87793% had theirlogos in the top leftcorner27% of logoinclude a tagline ora slogan80% primarly lightbackground andcolour scheme87% have searchfield47% have call-to-action button60% have latestnews and blog post63% contact infowas hard to find80% have newsletter signup 11% have social media linklinks18 19. Web Design (The Surface Plane)Web user interface / Design ElementsFfContrast and Uniformity: layout & GridColor Palettes and TypographyPattern & Texture19 20. Web Design (The Surface Plane)Web user interface / Design Elements /layout & Grid : 960 GridThe 12-column grid is divided into portionsthat are 60 pixels wide. The 16-column gridconsists of 40 pixel increments. Each columnhas 10 pixels of margin on the left and right,which create 20 pixel wide gutters betweencolumns20 21. 21 22. Web Design (The Surface Plane)Web user interface / Design Elements /layout & Grid : Applying the Golden Ratio to Web Layouts and elements1.6181.618960 / 1.618 = 594760 / 1.618 = 470http://getratio.com/http://uxmovement.com/content/applying-the-golden-ratio-to-web-layouts-and-objects/22 23. Web Design (The Surface Plane)Web user interface / Design Elements /layout & Grid : 10 Website Layout ExamplesURL:http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/3D screen Featured Graphic Featured photo Full screen photoHeadline & GalleryThree boxAdvanced GridFive Boxes Fixed SidebarPower Grid23 24. Three boxThe three boxes layout featuresone main graphic area followedby two smaller boxes underneath.Each of these can be filled with agraphic, a block of text or amixture of both. The main box inthis layout is often a jQueryslider.This design is ideal for a portfoliopage or anything that needs toshow off a few sample graphics.Each of the images could be alink that leads to a larger, morecomplex gallery page.24 25. Five BoxesThe five boxes layout is simplyan evolution of the threeboxes layout. All of the samelogic applies, its just beenmodified to hold even morecontent. It could easily befour boxes as well, it justdepends on what you want toshowcase. It also makes itlook like you put a little moreeffort into the design!Obviously, as you add to thelayout, the secondary itemsbecome smaller and smallerso for most uses, five boxes isprobably going to approachthe limit.25 26. Advanced Gridone primary graphic headingup the page. This is followedby a simple twist on the ideaof a uniform grid ofthumbnails. The space wouldallow for a span of foursquares horizontally, butinstead weve combined thefirst two areas so that the lefthalf of the page differs fromthe right.26 27. Power GridThe power grid is the mostcomplex layout in this article,but it is one of the mosteffective layouts for pagesthat need to contain all kindsof various related content.From images and musicplayers to text and videos, youcan cram just about anythinginto this layout and it staysstrong.27 28. Fixed SidebarThus far all the sites that weve seenhave had a top-side horizontalnavigation. The other popular optionis of course a vertical navigation,which lends itself to creating astrong vertical column on the leftside of the page. Often this is a fixedelement that stays where it is whilethe rest of the page scrolls. Thereason for this is so the navigationcan stay easily accessible from anypoint in the site.28 29. Headline & GalleryEveryone loves a good gallery page.From a layout perspective, whatcould be simpler? All you need is asolid, uniform grid of images andsome room for a headline with anoptional sub-head. The key here isto make your headline big and bold.Feel free to use this as a point ofcreativity and include a script orsome crazy typeface.29 30. 3D ScreenshotsAs developers continue to create anendless collection of webapps, the3D screenshots layout seen below, orsome variant of it, is becoming moreand more popular. The basic idea is totop your page with a headline andthen toss in some stylized previews ofyour application. These often comewith reflections, heavy shadows, bigbackground graphics, or evencomplex adornments such as vinescrawling all over the screenshots, butthe core idea is always really simple.30 31. Featured GraphicThe result is a page that is bold, yetminimal and clean. The statement itmakes is strong and impossible tomiss, just make sure your graphic isgood enough to be featured soprominently!31 32. Featured PhotoThe layout extremely common,especially among the photographycommunity.The basic idea here is to have a largeimage displaying either your designor photography (anything really),accompanied by a left-side verticalnavigation.32 33. Full Screen PhotoIt can be really hard to read contentwhen it is laid over a backgroundimage, so the basic idea here is tocreate an opaque (or nearly opaque)horizontal bar that sits on top of theimage and serves as a container forlinks, copy, logos and other content.33 34. Web Design (The Surface Plane)Grid & Layout SummaryGrid LayoutThe 12-column grid Five BoxesThe 16-column grid Three boxFixed SidebarAdvanced GridPower Grid3D screenFeatured photoFull screen photoFeatured GraphicHeadline & Gallery34 35. 35 36. Web Design (The Surface Plane)Web : Typography @font-face Revolution36 37. Web Design (The Surface Plane)@font-face RevolutionBefore After62223002000037 38. Web Design (The Surface Plane)A guide to Web typography Contrast Size Hierarchy Space38 39. Web Design (The Surface Plane)A guide to Web typography/ Contrast (Readability)World Wide WebThe WorldWideWeb (W3) is a wide-areahypermedia information retrieval initiativeaiming to give universal access to a largeuniverse of documents.Everything there is online about W3 is linkeddirectly or indirectly to this document,including an executive summary of the project,Mailing lists , Policy , Novembers W3 news ,Frequently Asked Questions .Whats out there?Pointers to the worlds online information,subjects , W3 servers, etc.Helpon the browser you are usingSoftware ProductsA list of W3 project components and theircurrent state. (e.g. Line Mode ,X11 Viola ,NeXTStep , Servers , Tools , Mail robot ,Library )Technicaltired39 40. Point Sizex-heightWeb Design (The Surface Plane)A guide to Web typography / Size ( legibility)40 41. 2mmWeb Design (The Surface Plane)A guide to Web typography / Size ( legibility)41 42. DISTANCE 57cm40cm x-height = 2.0mmx-height =2.85mm44cm x-height = 2.2mm48cm x-height = 2.4mm52cm x-height = 2.6mm56cm x-height = 2.8mm60cm x-height = 3.0mmhttp://accessibility.gtri.gatech.edu/assistant/acc_info/font_size.phpWeb Design (The Surface Plane)A guide to Web typography / Size ( legibility)42 43. Web Design (The Surface Plane)A guide to Web typography / Size ( legibility)Dont set body text below 10px*The best body text point size for the web:Verdana :14.5pt/20pxHelvetica, Arial: 15pt/ 21pxMyriad Pro, Georgie: 16pt / 22pxGill Sans: 17pt /23px43 44. All-caps, or using italic forsub-headings. Serif andsans serif faces can alsobe mixed to good effect.Web Design (The Surface Plane)A guide to Web typography / Hierarchy44 45. LeonardoFibonaccihttp://www.youtube.com/watch?v=1XSqcAq0A9k Fibonacci sequences (e.g. 16 24 40 64 104) whendefining the font size of headings and body copy Myriad Pro 16pt (Body text) Myriad Pro 24pt (Subheading) Myriad Pro 40pt (Heading) Myriad Pro 64pt (Sub title) Myriad Pro 104pt (Title)Web Design (The Surface Plane)A guide to Web typography / Hierarchy Fibonacci sequences45 46. Web Design (The Surface Plane)A guide to Web typography / Space46 47. Web Design(The Surface Plane)Themehttp://store1.adobe.com/cfusion/store/html/index.cfm?store=OLS-US&event=displayCategory&code=themehttp://www.adobe.com/type/fontfinder/47 48. Web Design (The Surface Plane)Best and worst Typeface?http://absolutegraphix.co.uk/bestworstfonts.asp?strID=Guest1248 49. Web Design (The Surface Plane)Best and worst Typeface ?http://absolutegraphix.co.uk/bestworstfonts.asp?strID=Guest2149 50. Best and worst Typefacehttp://absolutegraphix.co.uk/bestworstfonts.asp?strID=Guest50 51. Best and worst Typeface /Top 10 web fonts designer love (Free)1. Myriad Pro2. League Gothic3. Cabin4. Corbel5. Museo Slab6. Bebas Neue7. Ubuntu8. Lobster9. Franchise10.PT SerifFREE51 52. Best and worst Typeface /Top 10 web fonts designer love ($$$)1. Helvetica2. Gotham3. DIN4. Futura5. Neo Sans6. Adobe Caslon7. Skolar8. Kautiva9. Caecilia10.Fedra Sans$$$52 53. Web : TypographyA guide to Web typography Best Typeface and sizeContrast Body:Verdana, Myriad Pro & HelveticaSize Heading:Museo Slab, League GothicHierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)SpaceMyriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)53 54. Web Design (The Surface Plane)The Color WheelWarmCoolComplementarycolor schemeAnalogous colorschemePPPSSSS SST Tretreat advance54 55. Web Design (The Surface Plane)Colour CombinationsActive / VibrantRich Muted / CalmPastelNatural1.Subordinate, or base colour.This is a visually weak or subordinatecolour. It should contrast orcomplement.2.Dominant or maincolour.This colour definesthe communicativevalues of thecombination.3.Accent or highlight colour.The accent colour can be sympathetic to thesubordinate or dominant colour. Or, instead,you may choose an accent colour that isvisually strong and striking, and appears tocompete with the dominant colour. This canprovide tension within a combination55 56. Web Design (The Surface Plane)Application: Adobe KulerAfter downloading Switchboard fromAdobe Labs, users using the desktopversion of Kuler can export a color schemestraight into Adobe Photoshop, AdobeIllustrator and Adobe InDesign. Kuler is aMauritian Creole word for color.56 57. Web Design (The Surface Plane)Application:http://line25.comhttp://line25.com/articles/10-time-saving-online-color-tools-for-web-designers57 58. The meaning of colourhttp://www.informationisbeautiful.net/visualizations/colours-in-cultures/58 59. The meaning of colourRED:warmth, love, anger, danger, boldness, excitement, speed, strength, energy, determination, desire,passion, courage, socialismPINK:feminine, love, caring, nurtureORANGE:cheerfulness, low cost, affordability, enthusiasm, stimulation, creativity, aggression, food,halloween, liberal (politics)YELLOW:attention-grabbing, comfort, liveliness, cowardice, hunger, optimism, overwhelm, Summer, comfort,liveliness, intellect, happiness, energy, conflictGREEN:durability, reliability, environmental, luxurious, optimism, well-being, nature, calm, relaxation,Spring, safety, honesty, optimism, harmony, freshnessBLUE:peace, professionalism, loyalty, reliability, honor, trust, melancholia, boredom, coldness, Winter,depth, stability, professionalism, conservatismPURPLE:power, royalty, nobility, elegance, sophistication, artificial, luxury, mystery, royalty, elegance, magicGRAY:conservatism, traditionalism, intelligence, serious, dull, uninterestingBROWN:relaxing, confident, casual, reassuring, nature, earthy, solid, reliable, genuine, Autumn, enduranceBLACK:Elegance, sophistication, formality, power, strength, illegality, depression, morbidity, night, deathWHITE:Cleanliness, purity, newness, virginity, peace, innocence, simplicity, sterility, snow, ice, coldhttp://changingminds.org/disciplines/communication/color_effect.htm59 60. Web Design (The Surface Plane)A varicolored showcaseREd/ means-love-strength-power-energy-leadership-excitement/ associate-boldness-excitement-desire60 61. Web Design (The Surface Plane)A varicolored showcaseYellow/ means-happiness/ associate-liveliness-curiosity-amusement-joy-intelligence-brightness-caution61 62. Web : Color /A varicolored showcaseOrange/ means-cheerfulness-creativity/ associate-friendliness-confidence-playfulness-courage-steadfastness62 63. Web Design (The Surface Plane)A varicolored showcasePurple/ associate-power-nobility and wealthWisdom-royalty-independence-nobility-luxury-ambition-dignity-magic-mystery.prototype63 64. Web Design (The Surface Plane)A varicolored showcaseGreen/ means-harmony-nature-healing-life-food-health/ associate-money64 65. Web Design (The Surface Plane)A varicolored showcaseBlue/ is-sky-sea/ associate-depth-stability-tranquility-calmnessprototype65 66. Web Design (The Surface Plane)A varicolored showcaseBrown/ means-earthiness-nature-durability-tribal-comfort-reliability/ associate-relaxation-confidence66 67. Web Design (The Surface Plane)A varicolored showcaseWhite/ means-purity-innocence-wholeness-completion/ associate-snow-pearl-chalk-milk white-lily-smokehttp://www.awwwards.com/50-fantastic-white-web-designs.html67 68. Web Design (The Surface Plane)Colour SummaryComposition Combinations AssociateComplementary & Analogous Active / Vibrant Red : boldness , excitement,desireWarm & Cool Pastel Yellow : liveliness, curiosity,amusementRetreat & Advance Rich Blue : depth, stabilitytranquilityprimary secondary tertiarycolourMuted / Calm Green : life, food, healthNatural White : snow, pearl, chalk68 69. Web Design (The Surface Plane)Web user interface / Learning Sitehttps://learnable.comhttp://www.rit.edu/ili/http://www.bloc.iohttp://codeyear.comhttp://learncss.tutsplus.comhttp://www.pathwright.comhttp://hackerbuddy.comhttp://www.bloomfire.comhttp://teamtreehouse.comhttp://www.codeschool.comhttp://www.webcoursesbangkok.comhttp://www.ceolearningnetwork.com/FfSales pitche.g. 30 Days to Learn HTML*69 70. https://learnable.com70 71. http://www.rit.edu/ili/71 72. http://www.bloc.io72 73. http://learncss.tutsplus.com73 74. http://www.pathwright.com74 75. http://hackerbuddy.com75 76. http://www.bloomfire.com76 77. http://teamtreehouse.com77 78. http://www.codeschool.com78 79. http://www.webcoursesbangkok.com79 80. http://www.ceolearningnetwork.com/80 81. Web user interface / Design patternsMartin Welies patterns1. Martin Welies UI patterns2. Jennifer Tidwells UI Design Patterns3. Sari Laakso User Interface Design Patterns4. The Design of Sites: Patterns, Principles andProcesses for Crafting a Customer-Centered WebExperience by van Duyne, Landay and Hong.5. Yahoo Design Pattern Libraryhttp://boxesandarrows.com/ui-pattern-documentation-review/81 82. Web Design (The Surface Plane)Martin Welies patternshttp://ui-patterns.com/patterns82 83. Web Design (The Surface Plane)UI Design patternshttp://ui-patterns.com/patterns83 84. 12 Standard Screen Patterns84 85. Yahoo! Design Pattern Library85 86. Design Showcase86 87. Web Design (The Surface Plane)Emerging trends in web design1. Big Background Images/ HTML5 and JavaScript replace Flash2. Responsive and Mobile First Design3. Scrolling/ Grids and Infinite Scrolling/ Parallax scrolling/ Creative navigationshttp://99designs.com/designer-blog/2013/02/21/web-design-trends-for-2013/87 88. Emerging trends in web designBig Background Images / HTML5 and JavaScript replace Flash 1http://designbeep.com/2012/03/08/50-creative-use-of-large-background-images-in-web-design/http://webdesignledger.com/inspiration/20-great-examples-of-big-images-in-web-design88 89. Emerging trends in web designResponsive and Mobile First Designhttp://webdesignledger.com/inspiration/21-fresh-examples-of-responsive-web-design289 90. Emerging trends in web designScrolling / cinematic and storytelling experiencehttp://ats-vs-world.cadillac.com/#!/monaco390 91. Emerging trends in web designScrolling / Grids and Infinite Scrollinghttp://inspirationfeed.com/inspiration/websites-inspiration/35-inspirational-grid-based-website-designs/391 92. Emerging trends in web designScrolling / Parallax scrolling 3http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html92 93. Emerging trends in web designScrolling / Creative navigationshttp://99designs.com/designer-blog/2013/02/21/web-design-trends-for-2013/393 94. Web Design (The Surface Plane)New tools for web production Classic toolsPhotoshop, illustrator,Indesign, Dreamwaver,Firework, Flash Modern web toolsMuse, Edge Digital Publishing toolsIndesign Presentation toolsKeynote, PowerpointClickable PDF Theme toolsArtisteer Web base toolsCodiqa, Theme roller,Phone Gap Prototype toolsAxure, proto.io,fieldtestapp94 95. Modern web toolsMUSE95 96. Modern web toolsEdge Animate96 97. Theme toolsArtisteer97 98. Prototype toolsAxure98 99. Prototype toolsproto.io99 100. Prototype toolsfieldtestapp100 101. Web Design (The Skeleton Plane)First Principles of Interaction Design1.Aesthetics2.Anticipation3.Autonomy4.Consistency5.Customization & defaults6.Envisioning information7.Explorable interface8.Fitts law9.Affordance & feedback10.Memorability11.Metaphors12.Readability13.Undo101 102. 1. Aestheticsimplicit and explicit communicationcontribute to user experience102 103. 2. Anticipationanticipate users wants and needs103 104. 3. Autonomyuser autonomy (self governing) withstatus update104 105. 4. Consistencylooks, feel and behaves the same105 106. 5. Customization & Defaultmake assumption of usage, but dontmandate it106 107. 6. Envisioning informationdont overwhelm user with data,present them in an easy way107 108. 7. Explorable interfacewell marked roads and landmarks for explorationdont trap user with a single path, but offer path of least resistanceallow a way out but make it easier to stay in108 109. 8. Fitts LawFrequency of useTraveling time of cursorStep of usage109 110. 9. Affordance & feedbackhttp://dribbble.com/search?page=4&q=buttonProvide handles to work and manipulateKeep user informed what its doing and has done110 111. 10. Memorabilityreduce needs for user to memorize111 112. 11. Metaphorsevoke the familiar,simplify complex tasks112 113. 12. Readabilitytext has high contrast, blacktext on white is the best113 114. 13. Undoundo should be as easy or easier than do114 115. About web user & design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design115 116. 116 117. 117 118. About web user & design processUser-centered design (UCD) user-centered design (UCD) is a type ofuser interface design and a process inwhich the needs, wants, and limitationsof end users of a product are givenextensive attention at each stage of thedesign process. User-centered design can becharacterized as a multi-stage problemsolving process that not only requiresdesigners to analyse and foresee howusers are likely to use a product, but alsoto test the validity of their assumptionswith regard to user behaviour in realworld tests with actual users.http://www.userfocus.co.uk/pdf/Fable_Traditional_CN.pdfDownload118 119. About web user & design processThe elements of user experienceThe Elements of User Experience:User-Centered Design for the Weband Beyondhttp://sse.tongji.edu.cn/liangshuang/hci2013spring/readings/the-elements-of-user-experience.pdfhttp://www.jjg.net/elements/Download119 120. 120 121. Software interface / hypertext system121 122. The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.Jesse James Garrettjjg@jjg.netVisual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")Information Architecture: structural designof the information space to facilitateintuitive access to contentInteraction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionalityNavigation Design: design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understandingFunctional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needsUser Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the siteContent Requirements: definition ofcontent elements required in the sitein order to meet user needsInterface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understandingWeb as software interface Web as hypertext systemVisual Design: visual treatment of text,graphic page elements and navigationalcomponentsConcreteAbstract timeConceptionCompletionFunctionalSpecificationsContentRequirementsInteractionDesignInformationArchitectureVisual DesignInformation DesignInterface Design Navigation DesignSite ObjectivesUser NeedsUser Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the siteThis picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.task-oriented information-oriented30 March 2000 2000 Jesse James Garrett http://www.jjg.net/ia/122 123. 123 124. 124 125. The Strategy Plane The scope is fundamentallydetermined by the strategy ofthe site.This strategy incorporates notonly what the people runningthe site want to get out of it butwhat the users want to get outof the site as well. In the caseof our store example, some ofthe strategic objectives arepretty obvious: Users want tobuy products, and we want tosell them. Other objectivessuch as the role that dvertisingor content produced by ourusers plays in our businessmodel, for examplemight notbe so easy to articulate.What do we want to get out of this product?What do our users want to get out of it? Defining the Strategy Product Objectives- Business Goals- Brand Identity- Success Metrics User Needs- User Segmentation- Usability and User- Research Creating- Personas Team Roles and Process125 126. The Strategy Plane / Business Goals & User research126 127. The Scope PlaneThe structure defines the wayin which the various featuresand functions of the site fittogether. Just what thosefeatures and functions areconstitutes the scope of thesite.For example, somecommerce sites offer a featurethat enables users to savepreviously used shippingaddresses so they can be usedagain. Whether that featureor any featureis included on asite is a question of scope.what we want and what our users want,we can figure out how to satisfy all thosestrategic objectives. Defining the Scope- Reason #1: So YouKnow What YoureBuilding- Reason #2: So YouKnow What Youre NotBuilding Functionality andContent Defining Requirements Functional Specifications- Writing It Down Content Requirements PrioritizingRequirements127 128. The Structure PlaneOn the surface you see a seriesof Web pages, made up ofimages and text. Some of theseimages are things you can clickon, performing some sort offunction such as taking you toa shopping cart.Some of these images are justillustrations, such as aphotograph of a product forsale or the logo of the siteitself.Interaction design concerns the optionsinvolved in performing and completing tasks.Information architecture deals with theoptions involved in conveying information toa user. Defining the Structure Interaction Design- Conceptual Models- Error Handling Information Architecture Structuring Content- ArchitecturalApproaches- Organizing Principles- Language andMetadata Team Roles and Process128 129. Structurehierarchical structure(most common)matrix structure(product sites)organic structures(entertainment or educational sites)sequential structure(instructional material)129 130. The Skeleton PlaneBeneath that surface is theskeleton of the site: theplacement of buttons, controls,photos, and blocks of text.The skeleton is designed tooptimize the arrangement ofthese elements for maximumeffect and efficiencyso thatyou remember the logo and canfind that shopping cart buttonwhen you need it.First Principles of InteractionDesign:http://www.asktog.com/basics/firstPrinciples.htmlOn the skeleton plane, our concerns existalmost exclusively at the smaller scale ofindividual components and theirrelationships. Defining the Skeleton Convention andMetaphor Interface Design Navigation Design Information Design- Wayfinding Wireframes130 131. Interface Design, Navigation Design, Information Designinterface designGlobal navigationLocal navigationSupplementary navigationContextual navigationCourtesy navigationnavigation design infomation design131 132. The Surface PlaneOn the surface you see a seriesof Web pages, made up ofimages and text. Some of theseimages are things you can clickon, per- forming some sort offunction such as taking you toa shopping cart. Some of theseimages are just illustrations,such as a photograph of aproduct for sale or the logo ofthe site itself. Defining the Surface Making Sense of theSenses- Smell and Taste- Touch- Hearing- Vision Follow the Eye Contrast and Uniformity Internal and ExternalConsistency Color Palettes andTypography Design Comps and StyleGuidesDetermine how that arrangement should bepresented visually.132 133. About web user & design processCreating Personas and scenariosA persona is a fictionalcharacter constructed torepresent the needs of a wholerange of real users.By putting a face and a nameon the disconnected bits ofdata from your user researchand segmentation work,personas can help ensure thatyou keep the users in mindduring the design process.133 134. Creating Personas Step 1/ IDEOs Ethnographic techniques Shadowing (behavior observation)Observing people using products, shopping, going to hospitals,taking the train, using their cell phones Behavioral mapping (semiotic & comparative studies)Photographing people within a space, such as a hospital waitingroom, over 2 or 3 days Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product,service, or space Camera journals (visual journal)Asking consumers to keep visual diaries of their activities andimpressions relating to a product. Extreme user interviews (user interview)Talking to people who really know or know nothing about aproduct or service, and evaluating their experience using it. Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumptionexperiences. Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specifictopic.134 135. Creating Personas Step 2/ Motivation, Activities, and Attitudes MotivationAudiences motivationleading to explore,purchase, and use of theselected product ActivitiesAudiences behaviorpatterns when explore,purchase, and use of theselected product. AttitudesAudiences emotionalresponse when explore,purchase, and use of theselected product.135 136. Creating Personas Step 3/ Identify audience GOALS: experience goal, end goal, and life goal. Experience goalHow someone wants to feelwhile using a product orthe quality of theirinteraction with theproduct.- Feel smart or in control- Have fun- Feel cool or hip orrelaxed- Remain focused and alertRelated to visceralprocessing: how a user wantsto feel End goalA product or service canhelp accomplish such goalsdirectly or indirectly- Be aware of problemsbefore they becomecritical- Stay connected withfriends and family- Clear my to-do list by5:00 every day- Find music that Ill love- Get the best dealRelated to behavior: what auser wants to do Life goalLife goals describe apersonas long-termdesires, motivations, andself- image attributes,which cause the persona toconnect with a product- Live the good life- Succeed in my ambitionsto . . .- Be a connoisseur of . . .- Be attractive, popular, orrespected by my peersRelated to reflection: who auser wants to be136 137. Creating Personas Step 4/ Designate persona typeA persona can include a photo,some background informationand brief descriptions of howthe specified user type woulduse the products features.This helps the made-up userseem more real and worthreferring to duringdevelopment. In fact, to makethem more real, some teamspost the written personas onthe wall in a team area so theyget to know the personas reallywell.http://www.user.com/persona-example.htm137 138. Personas analysisTaskA screen-based computerinterface & system forpreparing and distributingmenusPersonal ParticularsWork at Boise Controls. a mid-sized manufacturer of electronicdevices used in home securitysystemHe supervises the chefs at eachof the six sites and overseescafeterias and catering servicesNot a big computer user, Fred cansend email and use spreadsheets,but often needs help from hisassistantPersonal: 55 years old,married,three grown children. Masterdegree from Johnson & WalesUniversity.Analysis Task on high levelmanagement Simple work flow Graphical user-interface Defaults Knowledgeable138 139. Persona-based scenarios Persona-based scenarios are concisenarrative descriptions of one or morepersonas using a product to achieve specificgoals. They allow us to start our designs froma story describing an ideal experience fromdifferent stakeholders perspectives. We use scenario to describe how people usingtechnology and analyzing how the technologyis (or could be) used to reshape theiractivities. It also help designers to conceptualize andcommunicate their ideas before a system isbuilt and its impacts felt.139 140. Purpose of scenarios1. Use scenario as a means of imagining ideal userinteractions2. Use it to define requirements3. Use these requirements in turn to define thefundamental interaction framework of the product/device/service4. Use the framework to enrich design details140 141. Types of scenarios1. Problem ScenarioAim at showing thecurrent situation andtelling why the product /application is necessary.2. Context ScenarioAim at telling storiesabout userbenefits ,ideal userexperience and how theproduct can best servethe needs and goals ofthe persona.3. Key Path & ValidationScenarioAim at describing howthe persona interactswith the product,showing on screenfeatures, informationand interaction design.141 142. About web user & design processUser center design process142 143. About web userUser center design process143 144. About web userUser center design process / researchStep 1Project Goal and ScenariosA clear definedProject goal, Aims and Objectives , Situation, Design scope,Scenarios and User benefitsStep 2RequirementsRequirements are the conditions(including constraints) to achieve the project goalStep 3SpecificationsSpecifications are detailed instructions ofproduct attributes which are aligned withproject requirement so as to ensure theproject goal will be achieved144 145. Web Design (The Surface Plane)RequirementsWhat is important?User experiencerequirement(UX, Flow, BJ Fogg,persuasive design, BrandExperience)Usability requirement(5e, usability principles)Function requirement(Core & Extended features)Content requirement(Mood board, Voice of tone,Information Architecture)Technology requirement(Use of technology)SpecificationsHow to implement?Form & MetaphorVoice of tone (mood)LayoutContent (text, video,animation, sound)InteractionImage / graphic /ChartFeaturesMenu / NavigationTechnologyNomenclatureTechnologyrequirementStrategy145 146. UCD in practiceStep 1 Persona2 typical users with differentprofiles who involved in using yourmobile app. Create the persona ofthese 2 users below.1.Identify someone with similar portrait in reallife and conduct One of Ethnographicresearch method mentioned in this practice2.Summarize research findings in terms ofaudience Motivation, Activities, and Attitudes3.Identify audience GOALS, experience goal,end goal, and life goal.4.Designate persona type146 147. UCD in practiceStep 2 Scenarios / interaction eventBEFORE SCENARIOS2 typical events (one for each persona)where the persona are likely to experiencethe problem with these main tasks beforethe web is introduced.List out 10 bullet- points to explain each of2 typical events for.Before / Interactive events / P1 Before / Interactive events / P2147 148. UCD in practiceStep 3 Scenarios / frustrations encounteredFRUSTRATIONSENCOUNTEREDHOW THEY ARESOLVED BY THEMOBILE APPFrustrations encountered / P1Frustrations encountered / P2Solved by the web / P1Solved by the web / P2148 149. UCD in practiceStep 4 Scenarios / interaction eventAFTER SCENARIOSThink about 2 future events where thepersona can successfully operate withoutfrustrations due to the introduction of thisweb and performing those main tasks.List out at least 10 bullet- points to explaineach of 2 future events.After / Interactive events / P1 After / Interactive events / P2149 150. UCD in practiceStep 5 Scenarios / storyboard150 151. UCD in practiceStep 6 Prototype and Test & Evaluate151 152. UCD in practiceStep 7 Test & EvaluateUserEmilyFacilitatorRichardwebCliveObserverPeter152 153. About web user & design processEvaluating web design Build your prototype for evaluation Applying UI design principles Use of UI pattern Desirability Test Usability Checklist Review Usability Expert Review153 154. Applying UI design principles?1.Aesthetics2.Anticipation3.Autonomy4.Consistency5.Customization & defaults6.Envisioning information7.Explorable interface8.Fitts law9.Affordance & feedback10.Memorability11.Metaphors12.Readability13.Undohttp://www.asktog.com/basics/rstPrinciples.html154 155. Use of UI pattern?Pattern Based Design is aformal way of documenting asolution to a common designproblem. Those patterns areways to capture optimalsolution to common usabilityor accessibility problem in aspecific context.155 156. Build your prototype for evaluationProof-of-Principle Prototype(paper prototype) - Lo-fi / Hi-fiwireframe - to validate theoverall structure and workflowof your site.156 157. Desirability Test157 158. Usability Checklist Review158 159. Usability Expert Review NavigationIt refers to the ability to find ones way aroundthe digital content. FunctionalityIt is the extent to which those features andfunctions that a user is likely to require areprovided. ControlIt refers to the relationship between the userand the digital content, where possible, theuser should be in control of the interaction. Help and SupportUser should be able to get ready access toassistance. LanguageThe digital content should speak the userslanguage. Terminology should be clear andconsistent. Jargon should be avoided. ContentThe page content is appropriate andsupporting user goal and expectation. FeedbackThe user should kept informed of what is goingon at any time. ConsistencyThe Digital content should be internallyconsistent. Global elements such as Searchfields should be in the same positionthroughout the site. Error HandlingWhere possible, the digital content shouldprevent errors from occurring by being clear,unambiguous and simple. Workflow supportThe system should enable users to carry outprocedures in a way that suit their preferredwork patterns and sequence. Visual ClarityThe digital content should be clear anduncluttered. The purpose and function of eachvisual element should be apparent. Fontsshould be of a suitable size etc.159 160. Case studyBlackboard / HKIEd / PolyUInteractive museum guidelearning company / Pearson / Houghton Mifflin Harcourt /McGraw Hill160 161. Case study Blackboard Pearson / Houghton Mifflin Harcourt / McGraw Hill161 162. Case studyBlackboard162 163. Case studyBlackboard/ Client stories163 164. 164 165. Case studyBlackboard/ Feature Showcase165 166. Case studyBlackboard / Learn@PolyU166 167. Case study Background The New Senior Secondary Curriculum (NSS) for F.4 to F. 6 studentsstates that visual arts appreciation and criticism in context and visualarts making as two major intertwined and inter-related strands. Visual Arts criticism has become a compulsory paper in theforthcoming 2012 Hong Kong Diploma of Secondary EducationExamination (HKDSE). Using community and authentic resources such as artworks inmuseums to teach Visual Arts is one of the strategies suggested by theNSS. Information technology such as using mobile device for interactivelearning plays an important role in the new teaching environment.167 168. Aim Develop a multimedia and interactive guide that can be used inmuseums for the learning of Visual Arts through art appreciation andcriticism. 7 participants from the Hong Kong Institute of Education conductedin-depth studies of 10 selected works of the Hong Kong Museum ofArt. Participants findings are transformed to make relevant audio, visual,and textual materials in the form of a portable individual guide. These guides are made available for secondary school students visitingthe museum.168 169. Background information level Basic information Artist backgrounds Historical, cultural and aesthetic backgrounds Forms and techniques Themes and subject matters Value and importance169 170. Interactive applications level Issues and discussion Links Responses Games and activities170 171. Flow171 172. Case studyLearning Company Pearson Houghton Mifflin Harcourt McGraw Hill172 173. Case study: McGraw HillServices-based education company173 174. 174 175. Case study: area9Software technologies175 176. Case study: PEARSONServices-based education company176 177. 177 178. 178 179. 179 180. Case study: Houghton Mifflin HarcourtServices-based education company180