- 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 [email protected] 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