Your SlideShare is downloading. ×
Clive pm presentation
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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. Content• Web Design (The Surface Plane) (visual design)• About web user and design process• Case study
  • 3. Web Design(The Surface Plane)Web user interface | Emerging trends in web design | New toolsfor web production | First Principles of Interaction Design |
  • 4. Web Design (The Surface Plane)The evolution of the web1989ThesimplesharingeraTheimage&tableeraThedesignintroeraThetechno-hypeeraTheusabilityeraThewebexperienceeraTheRichInternetApplicationThesocialwebera201020051994
  • 5. Design (The Surface Plane)/ The Evolution of Web Design/1992 / text-based pageTim Berners Lee
  • 6. Web Design (The Surface Plane)/ The Evolution of Web Design/ 1998 /Table-based and frame set designs
  • 7. 1997
  • 8. 2001
  • 9. 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. 2001
  • 11. 2001
  • 12. 2004
  • 13. 2005
  • 14. Web Design (The Surface Plane)/ The Evolution of Web Design/ 2000 / Dynamic HTML (DHTML)
  • 15. 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. 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 linklinks
  • 18. Web Design (The Surface Plane)Web user interface / Design ElementsFfContrast and Uniformity: layout & GridColor Palettes and TypographyPattern & Texture
  • 19. 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 betweencolumns
  • 20. 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
  • 21. Web Design (The Surface Plane)Web user interface / Design Elements /layout : CSS Layouts
  • 22.
  • 23. Web Design (The Surface Plane)Web user interface / Design Elements /layout : Common Grid
  • 24. 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 Grid
  • 25. 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.
  • 26. 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.
  • 27. 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.
  • 28. 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.
  • 29. 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.
  • 30. 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.
  • 31. 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.
  • 32. 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!
  • 33. 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.
  • 34. 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.
  • 35. 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 & Gallery
  • 36. Web Design (The Surface Plane)Web : Typography @font-face Revolution
  • 37. Web Design (The Surface Plane)@font-face RevolutionBefore After622230020000
  • 38. Web Design (The Surface Plane)A guide to Web typography• Contrast• Size• Hierarchy• Space
  • 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 )Technicaltired
  • 40. Point Sizex-heightWeb Design (The Surface Plane)A guide to Web typography / Size ( legibility可讀性)
  • 41. 2mmWeb Design (The Surface Plane)A guide to Web typography / Size ( legibility可讀性)
  • 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可讀性)
  • 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 /23px
  • 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 / Hierarchy
  • 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 sequences
  • 46. Web Design (The Surface Plane)A guide to Web typography / Space
  • 47. Web Design(The Surface Plane)Theme
  • 48. Web Design (The Surface Plane)Best and worst Typeface?
  • 49. Web Design (The Surface Plane)Best and worst Typeface ?
  • 50. Best and worst Typeface
  • 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 SerifFREE
  • 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$$$
  • 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)
  • 54. Web Design (The Surface Plane)The Color WheelWarmCoolComplementarycolor schemeAnalogous colorschemePPPSSSS SST Tretreat advance
  • 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 combination
  • 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.
  • 57. Web Design (The Surface Plane)Application:http://line25.com
  • 58. The meaning of colour
  • 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. Web Design (The Surface Plane)A varicolored showcaseREd/ means-love-strength-power-energy-leadership-excitement/ associate-boldness-excitement-desire
  • 61. Web Design (The Surface Plane)A varicolored showcaseYellow/ means-happiness/ associate-liveliness-curiosity-amusement-joy-intelligence-brightness-caution
  • 62. Web : Color /A varicolored showcaseOrange/ means-cheerfulness-creativity/ associate-friendliness-confidence-playfulness-courage-steadfastness
  • 63. Web Design (The Surface Plane)A varicolored showcasePurple/ associate-power-nobility and wealthWisdom-royalty-independence-nobility-luxury-ambition-dignity-magic-mystery.prototype
  • 64. Web Design (The Surface Plane)A varicolored showcaseGreen/ means-harmony-nature-healing-life-food-health/ associate-money
  • 65. Web Design (The Surface Plane)A varicolored showcaseBlue/ is-sky-sea/ associate-depth-stability-tranquility-calmnessprototype
  • 66. Web Design (The Surface Plane)A varicolored showcaseBrown/ means-earthiness-nature-durability-tribal-comfort-reliability/ associate-relaxation-confidence
  • 67. Web Design (The Surface Plane)A varicolored showcaseWhite/ means-purity-innocence-wholeness-completion/ associate-snow-pearl-chalk-milk white-lily-smoke
  • 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, chalk
  • 69. Web Design (The Surface Plane)Web user interface / Learning Sitehttps://learnable.com pitche.g. 30 Days to Learn HTML*
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 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. Web Design (The Surface Plane)Martin Welie’s patterns
  • 83. Web Design (The Surface Plane)UI Design patterns
  • 84. 12 Standard Screen Patterns
  • 85. Yahoo! Design Pattern Library
  • 86. Design Showcase
  • 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. Emerging trends in web designBig Background Images / HTML5 and JavaScript replace Flash 1
  • 89. Emerging trends in web designResponsive and Mobile First Design
  • 90. Emerging trends in web designScrolling / cinematic and storytelling experience!/monaco3
  • 91. Emerging trends in web designScrolling / Grids and Infinite Scrolling
  • 92. Emerging trends in web designScrolling / Parallax scrolling 3
  • 93. Emerging trends in web designScrolling / Creative navigations
  • 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,,fieldtestapp
  • 95. Modern web toolsMUSE
  • 96. Modern web toolsEdge Animate
  • 97. Theme toolsArtisteer
  • 98. Prototype toolsAxure
  • 99. Prototype
  • 100. Prototype toolsfieldtestapp
  • 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.Undo
  • 102. 1. Aestheticsimplicit and explicit communicationcontribute to user experience
  • 103. 2. Anticipationanticipate user’s wants and needs
  • 104. 3. Autonomyuser autonomy (self governing) withstatus update
  • 105. 4. Consistencylooks, feel and behaves the same
  • 106. 5. Customization & Defaultmake assumption of usage, but don’tmandate it
  • 107. 6. Envisioning informationdon’t overwhelm user with data,present them in an easy way
  • 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 in
  • 109. 8. Fitt’s LawFrequency of useTraveling time of cursorStep of usage
  • 110. 9. Affordance & feedback handles to work and manipulateKeep user informed what its doing and has done
  • 111. 10. Memorabilityreduce needs for user to memorize
  • 112. 11. Metaphorsevoke the familiar,simplify complex tasks
  • 113. 12. Readabilitytext has high contrast, blacktext on white is the best
  • 114. 13. Undoundo should be as easy or easier than do
  • 115. About web user & design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
  • 116. 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.
  • 117. About web user & design processThe elements of user experienceThe Elements of User Experience:User-Centered Design for the Weband Beyond
  • 118. Software interface / hypertext system
  • 119. 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
  • 120. 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 Process
  • 121. The Strategy Plane 戰略層 / Business Goals & User research
  • 122. 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‣ PrioritizingRequirements
  • 123. 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 Process
  • 124. Structurehierarchical structure(most common)matrix structure(product sites)organic structures(entertainment or educational sites)sequential structure(instructional material)
  • 125. 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‣ Wireframes
  • 126. Interface Design, Navigation Design, Information Designinterface designGlobal navigationLocal navigationSupplementary navigationContextual navigationCourtesy navigationnavigation design infomation design
  • 127. 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.
  • 128. 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.
  • 129. 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.
  • 130. 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.
  • 131. 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 be
  • 132. 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.
  • 133. 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✓ Knowledgeable
  • 134. 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.
  • 135. 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 details
  • 136. 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.
  • 137. About web user & design processUser center design process
  • 138. About web userUser center design process
  • 139. 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 achieved
  • 140. 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 / NavigationTechnologyNomenclatureTechnologyrequirementStrategy
  • 141. 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 type
  • 142. 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 / P2
  • 143. UCD in practiceStep 3 Scenarios / frustrations encounteredFRUSTRATIONSENCOUNTEREDHOW THEY ARESOLVED BY THEMOBILE APPFrustrations encountered / P1Frustrations encountered / P2Solved by the web / P1Solved by the web / P2
  • 144. 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 / P2
  • 145. UCD in practiceStep 5 Scenarios / storyboard
  • 146. UCD in practiceStep 6 Prototype and Test & Evaluate
  • 147. UCD in practiceStep 7 Test & EvaluateUserEmilyFacilitatorRichardwebCliveObserverPeter
  • 148. 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 Review
  • 149. Applying UI design principles?1.Aesthetics2.Anticipation3.Autonomy4.Consistency5.Customization & defaults6.Envisioning information7.Explorable interface8.Fitt’s law9.Affordance & feedback10.Memorability11.Metaphors12.Readability13.Undo
  • 150. 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.
  • 151. Build your prototype for evaluationProof-of-Principle Prototype(paper prototype) - Lo-fi / Hi-fiwireframe - to validate theoverall structure and workflowof your site.
  • 152. Desirability Test
  • 153. Usability Checklist Review
  • 154. 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.
  • 155. Case studyBlackboard / HKIEd / PolyUInteractive museum guidelearning company / Pearson / Houghton Mifflin Harcourt /McGraw Hill
  • 156. Case study• Blackboard• 藝展計劃 – ⾹香港藝術館實地應⽤用指南• Pearson / Houghton Mifflin Harcourt / McGraw Hill
  • 157. Case studyBlackboard
  • 158. Case studyBlackboard/ Client stories
  • 159. Case studyBlackboard/ Feature Showcase
  • 160. Case studyBlackboard / Learn@PolyU
  • 161. 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.
  • 162. 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.
  • 163. Background information level• Basic information• Artist backgrounds• Historical, cultural and aesthetic backgrounds• Forms and techniques• Themes and subject matters• Value and importance
  • 164. Interactive applications level• Issues and discussion• Links• Responses• Games and activities
  • 165. Flow
  • 166. Case studyLearning Company• Pearson• Houghton Mifflin Harcourt• McGraw Hill
  • 167. Case study: McGraw HillServices-based education company
  • 168. Learn Smart
  • 169. Case study: area9Software technologies
  • 170. Case study: PEARSONServices-based education company
  • 171. Case study: Houghton Mifflin HarcourtServices-based education company