Clive pm presentation


Published on

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Clive pm presentation

  1. 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.
  2. 2. Content• Web Design (The Surface Plane) (visual design)• About web user and design process• Case study2
  3. 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. 4. Web Design (The Surface Plane)The evolution of the web1989ThesimplesharingeraTheimage&tableeraThedesignintroeraThetechno-hypeeraTheusabilityeraThewebexperienceeraTheRichInternetApplicationThesocialwebera2010200519944
  5. 5. Design (The Surface Plane)/ The Evolution of Web Design/1992 / text-based pageTim Berners Lee5
  6. 6. Web Design (The Surface Plane)/ The Evolution of Web Design/ 1998 /Table-based and frame set designs6
  7. 7. 7
  8. 8. 19978
  9. 9. 20019
  10. 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. 11. 200111
  12. 12. 200112
  13. 13. 200413
  14. 14. 200514
  15. 15. Web Design (The Surface Plane)/ The Evolution of Web Design/ 2000 / Dynamic HTML (DHTML)15
  16. 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. 17.
  18. 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. 19. Web Design (The Surface Plane)Web user interface / Design ElementsFfContrast and Uniformity: layout & GridColor Palettes and TypographyPattern & Texture19
  20. 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. 21
  22. 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 = 470
  23. 23. Web Design (The Surface Plane)Web user interface / Design Elements /layout & Grid : 10 Website Layout ExamplesURL: screen Featured Graphic Featured photo Full screen photoHeadline & GalleryThree boxAdvanced GridFive Boxes Fixed SidebarPower Grid23
  24. 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. 25. Five BoxesThe five boxes layout is simplyan evolution of the threeboxes layout. All of the samelogic applies, it’s 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. 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 we’ve combined thefirst two areas so that the lefthalf of the page differs fromthe right.26
  27. 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. 28. Fixed SidebarThus far all the sites that we’ve 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. 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. 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. 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. 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. 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. 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. 35
  36. 36. Web Design (The Surface Plane)Web : Typography @font-face Revolution36
  37. 37. Web Design (The Surface Plane)@font-face RevolutionBefore After62223002000037
  38. 38. Web Design (The Surface Plane)A guide to Web typography• Contrast• Size• Hierarchy• Space38
  39. 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. 40. Point Sizex-heightWeb Design (The Surface Plane)A guide to Web typography / Size ( legibility可讀性)40
  41. 41. 2mmWeb Design (The Surface Plane)A guide to Web typography / Size ( legibility可讀性)41
  42. 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.0mm Design (The Surface Plane)A guide to Web typography / Size ( legibility可讀性)42
  43. 43. Web Design (The Surface Plane)A guide to Web typography / Size ( legibility可讀性)Don’t 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. 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. 45. LeonardoFibonacci• 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. 46. Web Design (The Surface Plane)A guide to Web typography / Space46
  47. 47. Web Design(The Surface Plane)Theme
  48. 48. Web Design (The Surface Plane)Best and worst Typeface?
  49. 49. Web Design (The Surface Plane)Best and worst Typeface ?
  50. 50. Best and worst Typeface
  51. 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. 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. 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. 54. Web Design (The Surface Plane)The Color WheelWarmCoolComplementarycolor schemeAnalogous colorschemePPPSSSS SST Tretreat advance54
  55. 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. 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. 57. Web Design (The Surface Plane)Application:http://line25.com
  58. 58. The meaning of colour
  59. 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, cold
  60. 60. Web Design (The Surface Plane)A varicolored showcaseREd/ means-love-strength-power-energy-leadership-excitement/ associate-boldness-excitement-desire60
  61. 61. Web Design (The Surface Plane)A varicolored showcaseYellow/ means-happiness/ associate-liveliness-curiosity-amusement-joy-intelligence-brightness-caution61
  62. 62. Web : Color /A varicolored showcaseOrange/ means-cheerfulness-creativity/ associate-friendliness-confidence-playfulness-courage-steadfastness62
  63. 63. Web Design (The Surface Plane)A varicolored showcasePurple/ associate-power-nobility and wealthWisdom-royalty-independence-nobility-luxury-ambition-dignity-magic-mystery.prototype63
  64. 64. Web Design (The Surface Plane)A varicolored showcaseGreen/ means-harmony-nature-healing-life-food-health/ associate-money64
  65. 65. Web Design (The Surface Plane)A varicolored showcaseBlue/ is-sky-sea/ associate-depth-stability-tranquility-calmnessprototype65
  66. 66. Web Design (The Surface Plane)A varicolored showcaseBrown/ means-earthiness-nature-durability-tribal-comfort-reliability/ associate-relaxation-confidence66
  67. 67. Web Design (The Surface Plane)A varicolored showcaseWhite/ means-purity-innocence-wholeness-completion/ associate-snow-pearl-chalk-milk white-lily-smoke
  68. 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. 69. Web Design (The Surface Plane)Web user interface / Learning Sitehttps://learnable.com pitche.g. 30 Days to Learn HTML*69
  70. 70. https://learnable.com70
  71. 71.
  72. 72. http://www.bloc.io72
  73. 73. http://learncss.tutsplus.com73
  74. 74. http://www.pathwright.com74
  75. 75. http://hackerbuddy.com75
  76. 76. http://www.bloomfire.com76
  77. 77. http://teamtreehouse.com77
  78. 78. http://www.codeschool.com78
  79. 79. http://www.webcoursesbangkok.com79
  80. 80.
  81. 81. Web user interface / Design patternsMartin Welie’s patterns1. Martin Welie’s UI patterns2. Jennifer Tidwell’s 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 Library
  82. 82. Web Design (The Surface Plane)Martin Welie’s patterns
  83. 83. Web Design (The Surface Plane)UI Design patterns
  84. 84. 12 Standard Screen Patterns84
  85. 85. Yahoo! Design Pattern Library85
  86. 86. Design Showcase86
  87. 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 navigations
  88. 88. Emerging trends in web designBig Background Images / HTML5 and JavaScript replace Flash 1
  89. 89. Emerging trends in web designResponsive and Mobile First Design
  90. 90. Emerging trends in web designScrolling / cinematic and storytelling experience!/monaco390
  91. 91. Emerging trends in web designScrolling / Grids and Infinite Scrolling
  92. 92. Emerging trends in web designScrolling / Parallax scrolling 3
  93. 93. Emerging trends in web designScrolling / Creative navigations
  94. 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,,fieldtestapp94
  95. 95. Modern web toolsMUSE95
  96. 96. Modern web toolsEdge Animate96
  97. 97. Theme toolsArtisteer97
  98. 98. Prototype toolsAxure98
  99. 99. Prototype toolsproto.io99
  100. 100. Prototype toolsfieldtestapp100
  101. 101. Web Design (The Skeleton Plane)First Principles of Interaction Design1.Aesthetics2.Anticipation3.Autonomy4.Consistency5.Customization & defaults6.Envisioning information7.Explorable interface8.Fitt’s law9.Affordance & feedback10.Memorability11.Metaphors12.Readability13.Undo101
  102. 102. 1. Aestheticsimplicit and explicit communicationcontribute to user experience102
  103. 103. 2. Anticipationanticipate user’s wants and needs103
  104. 104. 3. Autonomyuser autonomy (self governing) withstatus update104
  105. 105. 4. Consistencylooks, feel and behaves the same105
  106. 106. 5. Customization & Defaultmake assumption of usage, but don’tmandate it106
  107. 107. 6. Envisioning informationdon’t overwhelm user with data,present them in an easy way107
  108. 108. 7. Explorable interfacewell marked roads and landmarks for explorationdon’t trap user with a single path, but offer path of least resistanceallow a way out but make it easier to stay in108
  109. 109. 8. Fitt’s LawFrequency of useTraveling time of cursorStep of usage109
  110. 110. 9. Affordance & feedback handles to work and manipulateKeep user informed what its doing and has done110
  111. 111. 10. Memorabilityreduce needs for user to memorize111
  112. 112. 11. Metaphorsevoke the familiar,simplify complex tasks112
  113. 113. 12. Readabilitytext has high contrast, blacktext on white is the best113
  114. 114. 13. Undoundo should be as easy or easier than do114
  115. 115. About web user & design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design115
  116. 116. 116
  117. 117. 117
  118. 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.
  119. 119. About web user & design processThe elements of user experienceThe Elements of User Experience:User-Centered Design for the Weband Beyond
  120. 120. 120
  121. 121. Software interface / hypertext system121
  122. 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
  123. 123. 123
  124. 124. 124
  125. 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 objectives—such as the role that dvertisingor content produced by ourusers plays in our businessmodel, for example—might 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. 126. The Strategy Plane 戰略層 / Business Goals & User research126
  127. 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 feature—or any feature—is 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 You’reBuilding- Reason #2: So YouKnow What You’re NotBuilding‣ Functionality andContent‣ Defining Requirements‣ Functional Specifications- Writing It Down‣ Content Requirements‣ PrioritizingRequirements127
  128. 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. 129. Structurehierarchical structure(most common)matrix structure(product sites)organic structures(entertainment or educational sites)sequential structure(instructional material)129
  130. 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 efficiency—so thatyou remember the logo and canfind that shopping cart buttonwhen you need it.First Principles of InteractionDesign: 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. 131. Interface Design, Navigation Design, Information Designinterface designGlobal navigationLocal navigationSupplementary navigationContextual navigationCourtesy navigationnavigation design infomation design131
  132. 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. 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. 134. Creating Personas Step 1/ IDEO’s 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. 135. Creating Personas Step 2/ Motivation, Activities, and Attitudes‣ MotivationAudience’s motivationleading to explore,purchase, and use of theselected product‣ ActivitiesAudience’s behaviorpatterns when explore,purchase, and use of theselected product.‣ AttitudesAudience’s emotionalresponse when explore,purchase, and use of theselected product.135
  136. 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 I’ll love- Get the best dealRelated to behavior: what auser wants to do‣ Life goalLife goals describe apersona’s 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. 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.
  138. 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. 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. 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. 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. 142. About web user & design processUser center design process142
  143. 143. About web userUser center design process143
  144. 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. 145. Web Design (The Surface Plane)RequirementsWhat is important?‣User experiencerequirement(UX, Flow, BJ Fogg,persuasive design, BrandExperience)‣Usability requirement(5’e, 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. 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. 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. 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. 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. 150. UCD in practiceStep 5 Scenarios / storyboard150
  151. 151. UCD in practiceStep 6 Prototype and Test & Evaluate151
  152. 152. UCD in practiceStep 7 Test & EvaluateUserEmilyFacilitatorRichardwebCliveObserverPeter152
  153. 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. 154. Applying UI design principles?1.Aesthetics2.Anticipation3.Autonomy4.Consistency5.Customization & defaults6.Envisioning information7.Explorable interface8.Fitt’s law9.Affordance & feedback10.Memorability11.Metaphors12.Readability13.Undo
  155. 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. 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. 157. Desirability Test157
  158. 158. Usability Checklist Review158
  159. 159. Usability Expert Review‣ NavigationIt refers to the ability to find one’s 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 user’slanguage. 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. 160. Case studyBlackboard / HKIEd / PolyUInteractive museum guidelearning company / Pearson / Houghton Mifflin Harcourt /McGraw Hill160
  161. 161. Case study• Blackboard• 藝展計劃 – ⾹香港藝術館實地應⽤用指南• Pearson / Houghton Mifflin Harcourt / McGraw Hill161
  162. 162. Case studyBlackboard162
  163. 163. Case studyBlackboard/ Client stories163
  164. 164. 164
  165. 165. Case studyBlackboard/ Feature Showcase165
  166. 166. Case studyBlackboard / Learn@PolyU166
  167. 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. 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. 169. Background information level• Basic information• Artist backgrounds• Historical, cultural and aesthetic backgrounds• Forms and techniques• Themes and subject matters• Value and importance169
  170. 170. Interactive applications level• Issues and discussion• Links• Responses• Games and activities170
  171. 171. Flow171
  172. 172. Case studyLearning Company• Pearson• Houghton Mifflin Harcourt• McGraw Hill172
  173. 173. Case study: McGraw HillServices-based education company173
  174. 174. 174
  175. 175. Case study: area9Software technologies175
  176. 176. Case study: PEARSONServices-based education company176
  177. 177. 177
  178. 178. 178
  179. 179. 179
  180. 180. Case study: Houghton Mifflin HarcourtServices-based education company180