Upload
amau-mau
View
560
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Hanlune-learning
PM
Afternoon Session 200-500 pm edited by Clive NG
Copyright Statement NOTICE The following presentation contains copyrighted materials Material being used for educational purposes only Further use is prohibited
httpssitesgooglecomsitesdcliveng
Content
bull Web Design (The Surface Plane) (visual design)
bull About web user and design process
bull Case study
Web Design (The Surface Plane)
Web user interface | Emerging trends in web design | New tools for web production | First Principles of Interaction Design |
Web Design (The Surface Plane)The evolution of the web
1989
The
sim
ple
shar
ing
era
The
imag
e amp
tabl
e er
a
The
desi
gn in
tro
era
The
tech
no-h
ype
era
The
usab
ility
era
The
web
exp
erie
nce
era
The
Ric
h In
tern
et A
pplic
atio
n
The
soci
al w
eb e
ra
201020051994
httpwwww3orgHistory19921103-hypertexthypertextWWWTheProjecthtml
Web Design (The Surface Plane) The Evolution of Web Design 1992 text-based page
Tim Berners Lee
Web Design (The Surface Plane) The Evolution of Web Design 1998 Table-based and frame set designs
1997
2001
Web Design The Evolution of Web Design 2000 Flash-based web designs
class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world
2001
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Content
bull Web Design (The Surface Plane) (visual design)
bull About web user and design process
bull Case study
Web Design (The Surface Plane)
Web user interface | Emerging trends in web design | New tools for web production | First Principles of Interaction Design |
Web Design (The Surface Plane)The evolution of the web
1989
The
sim
ple
shar
ing
era
The
imag
e amp
tabl
e er
a
The
desi
gn in
tro
era
The
tech
no-h
ype
era
The
usab
ility
era
The
web
exp
erie
nce
era
The
Ric
h In
tern
et A
pplic
atio
n
The
soci
al w
eb e
ra
201020051994
httpwwww3orgHistory19921103-hypertexthypertextWWWTheProjecthtml
Web Design (The Surface Plane) The Evolution of Web Design 1992 text-based page
Tim Berners Lee
Web Design (The Surface Plane) The Evolution of Web Design 1998 Table-based and frame set designs
1997
2001
Web Design The Evolution of Web Design 2000 Flash-based web designs
class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world
2001
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)
Web user interface | Emerging trends in web design | New tools for web production | First Principles of Interaction Design |
Web Design (The Surface Plane)The evolution of the web
1989
The
sim
ple
shar
ing
era
The
imag
e amp
tabl
e er
a
The
desi
gn in
tro
era
The
tech
no-h
ype
era
The
usab
ility
era
The
web
exp
erie
nce
era
The
Ric
h In
tern
et A
pplic
atio
n
The
soci
al w
eb e
ra
201020051994
httpwwww3orgHistory19921103-hypertexthypertextWWWTheProjecthtml
Web Design (The Surface Plane) The Evolution of Web Design 1992 text-based page
Tim Berners Lee
Web Design (The Surface Plane) The Evolution of Web Design 1998 Table-based and frame set designs
1997
2001
Web Design The Evolution of Web Design 2000 Flash-based web designs
class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world
2001
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)The evolution of the web
1989
The
sim
ple
shar
ing
era
The
imag
e amp
tabl
e er
a
The
desi
gn in
tro
era
The
tech
no-h
ype
era
The
usab
ility
era
The
web
exp
erie
nce
era
The
Ric
h In
tern
et A
pplic
atio
n
The
soci
al w
eb e
ra
201020051994
httpwwww3orgHistory19921103-hypertexthypertextWWWTheProjecthtml
Web Design (The Surface Plane) The Evolution of Web Design 1992 text-based page
Tim Berners Lee
Web Design (The Surface Plane) The Evolution of Web Design 1998 Table-based and frame set designs
1997
2001
Web Design The Evolution of Web Design 2000 Flash-based web designs
class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world
2001
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpwwww3orgHistory19921103-hypertexthypertextWWWTheProjecthtml
Web Design (The Surface Plane) The Evolution of Web Design 1992 text-based page
Tim Berners Lee
Web Design (The Surface Plane) The Evolution of Web Design 1998 Table-based and frame set designs
1997
2001
Web Design The Evolution of Web Design 2000 Flash-based web designs
class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world
2001
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane) The Evolution of Web Design 1998 Table-based and frame set designs
1997
2001
Web Design The Evolution of Web Design 2000 Flash-based web designs
class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world
2001
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
1997
2001
Web Design The Evolution of Web Design 2000 Flash-based web designs
class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world
2001
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
2001
Web Design The Evolution of Web Design 2000 Flash-based web designs
class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world
2001
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design The Evolution of Web Design 2000 Flash-based web designs
class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world
2001
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
2001
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
2001
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
2004
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
2005
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design
Content management system
Joomla Drupal Wordpress
Changeableskin
Generated HTML
bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats
Ff
877
93 had their logos in the top left corner
27 of logo include a tagline or a slogan
80 primarly light background and colour scheme
87 have search field
47 have call-to-action button
60 have latest news and blog post
63 contact info was hard to find
80 have newsletter signup 11 have social media link
links
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Web user interface Design Elements
Ff
Contrast and Uniformity layout amp Grid
Color Palettes and Typography
Pattern amp Texture
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid
The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements
1618
1618
960 1618 = 594
760 1618 = 470
httpgetratiocom
httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
layoutsironmyerscom
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples
URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples
3D screen Featured Graphic Featured photo Full screen photo
Headline amp Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Three box
The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider
This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Five Boxes
The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Advanced Grid
one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Power Grid
The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Fixed Sidebar
Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Headline amp Gallery
Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
3D Screenshots
As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Featured Graphic
The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Featured Photo
The layout extremely common especially among the photography community
The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Full Screen Photo
It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Grid amp Layout Summary
Grid Layout
The 12-column grid Five Boxes
The 16-column grid Three box
Fixed Sidebar
Advanced Grid
Power Grid
3D screen
Featured photo
Full screen photo
Featured Graphic
Headline amp Gallery
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Web Typography font-face Revolution
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)font-face Revolution
Before After
622
230020000
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A guide to Web typography
bull Contrast
bull Size
bull Hierarchy
bull Space
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)
World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical
tired
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Point Size
x-height
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
2mm
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
DISTANCE 57cm
40cm x-height = 20mm
x-height = 285mm
44cm x-height = 22mm
48cm x-height = 24mm
52cm x-height = 26mm
56cm x-height = 28mm
60cm x-height = 30mm
httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)
Donrsquot set body text below 10px
The best body text point size for the web
Verdana 145pt20px
Helvetica Arial 15pt 21px
Myriad Pro Georgie 16pt 22px
Gill Sans 17pt 23px
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect
Web Design (The Surface Plane)A guide to Web typography Hierarchy
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Leonardo Fibonacci
httpwwwyoutubecomwatchv=1XSqcAq0A9k
bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining 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
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A guide to Web typography Space
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Theme
httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme
httpwwwadobecomtypefontfinder
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
1
2
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
2
1
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Best and worst Typeface
httpabsolutegraphixcoukbestworstfontsaspstrID=Guest
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Best and worst Typeface Top 10 web fonts designer love (Free)
1 Myriad Pro
2 League Gothic
3 Cabin
4 Corbel
5 Museo Slab
6 Bebas Neue
7 Ubuntu
8 Lobster
9 Franchise
10PT Serif
FREE
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Best and worst Typeface Top 10 web fonts designer love ($$$)
1 Helvetica
2 Gotham
3 DIN
4 Futura
5 Neo Sans
6 Adobe Caslon
7 Skolar
8 Kautiva
9 Caecilia
10Fedra Sans
$$$
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Typography
A guide to Web typography Best Typeface and size
Contrast Body Verdana Myriad Pro amp Helvetica
Size Heading Museo Slab League Gothic
Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)
Space
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)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)The Color Wheel
WarmCool
Complementary color scheme
Analogous color scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Colour Combinations
Active Vibrant
Rich Muted Calm
Pastel
Natural
1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement
2Dominant or main colour This colour defines the communicative values of the combination
3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Application Adobe Kuler
After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Application httpline25com
httpline25comarticles10-time-saving-online-color-tools-for-web-designers
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
The meaning of colour
httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
The meaning of colour
REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold
httpchangingmindsorgdisciplinescom
municationcolor_effecthtm
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A varicolored showcase
REd means
- love
- strength
- power
- energy
- leadership
- excitement
associate
- boldness
- excitement
- desire
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A varicolored showcase
Yellow means
- happiness
associate
- liveliness
- curiosity
- amusement
- joy
- intelligence
- brightness
- caution
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Color A varicolored showcase
Orange means
- cheerfulness
- creativity
associate
- friendliness
- confidence
- playfulness
- courage
- steadfastness
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A varicolored showcase
Purple associate
- power
- nobility and wealth
Wisdom
- royalty
- independence
- nobility
- luxury
- ambition
- dignity
- magic
- mystery
prototype
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A varicolored showcase
Green means
- harmony
- nature
- healing
- life
- food
- health
associate
- money
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A varicolored showcase
Blue is
- sky
- sea
associate
- depth
- stability
- tranquility
- calmness
prototype
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A varicolored showcase
Brown means
- earthiness
- nature
- durability
- tribal
- comfort
- reliability
associate
- relaxation
- confidence
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)A varicolored showcase
White means
- purity
- innocence
- wholeness
- completion
associate
- snow
- pearl
- chalk
- milk white
- lily
- smoke
httpwwwawwwardscom50-fantastic-white-web-designshtml
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Colour Summary
Composition Combinations Associate
Complementary amp Analogous Active Vibrant Red boldness excitement desire
Warm amp Cool Pastel Yellow liveliness curiosity amusement
Retreat amp Advance Rich Blue depth stabilitytranquility
primary secondary tertiary colour
Muted Calm Green life food health
Natural White snow pearl chalk
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Web user interface Learning Site
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httpcodeyearcom
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Ff
Sales pitcheg 30 Days to Learn HTML
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpslearnablecom
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpwwwriteduili
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpwwwblocio
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httplearncsstutspluscom
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpwwwpathwrightcom
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httphackerbuddycom
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpwwwbloomfirecom
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpteamtreehousecom
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpwwwcodeschoolcom
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpwwwwebcoursesbangkokcom
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
httpwwwceolearningnetworkcom
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web user interface Design patternsMartin Weliersquos patterns
1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and
Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong
5 Yahoo Design Pattern Library
httpboxesandarrowscomui-pattern-documentation-review
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Martin Weliersquos patterns
httpui-patternscompatterns
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)UI Design patterns
httpui-patternscompatterns
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
12 Standard Screen Patterns
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Yahoo Design Pattern Library
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Design Showcase
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)Emerging trends in web design
1 Big Background Images HTML5 and JavaScript replace Flash
2 Responsive and Mobile First Design
3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1
httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design
httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Emerging trends in web designResponsive and Mobile First Design
httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design
2
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Emerging trends in web designScrolling cinematic and storytelling experience
httpats-vs-worldcadillaccommonaco
3
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Emerging trends in web designScrolling Grids and Infinite Scrolling
httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs
3
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Emerging trends in web designScrolling Parallax scrolling 3
httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Emerging trends in web designScrolling Creative navigations
http99designscomdesigner-blog20130221web-design-trends-for-2013
3
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
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 protoio fieldtestapp
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Modern web tools MUSE
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Modern web tools Edge Animate
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Theme toolsArtisteer
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Prototype toolsAxure
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Prototype toolsprotoio
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Prototype toolsfieldtestapp
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Skeleton Plane)First Principles of Interaction Design
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13Undo
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
1 Aestheticsimplicit and explicit communicationcontribute to user experience
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
2 Anticipationanticipate userrsquos wants and needs
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
3 Autonomyuser autonomy (self governing) with status update
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
4 Consistencylooks feel and behaves the same
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
5 Customization amp Defaultmake assumption of usage but donrsquot mandate it
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button
Provide handles to work and manipulateKeep user informed what its doing and has done
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
10 Memorabilityreduce needs for user to memorize
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
11 Metaphorsevoke the familiar simplify complex tasks
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
12 Readabilitytext has high contrast black text on white is the best
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
13 Undoundo should be as easy or easier than do
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
About web user amp design processUser-centered design (UCD) 以用戶為中心的設計
bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process
bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users
httpwwwuserfocuscoukpdfFable_Traditional_CNpdf
Download
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
About web user amp design processThe elements of user experience
The Elements of User Experience User-Centered Design for the Web and Beyond
httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf
httpwwwjjgnetelements
Download
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Software interface hypertext system
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut 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 confusionas 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 Garrettjjgjjgnet
Visual Design graphic treatment of interfaceelements (the look in look-and-feel)
Information Architecture structural designof the information space to facilitateintuitive access to content
Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality
Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
Content Requirements definition ofcontent elements required in the sitein order to meet user needs
Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design visual treatment of textgraphic page elements and navigationalcomponents
Concrete
Abstracttim
eConception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site
This 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-oriented
30 March 2000
copy 2000 Jesse James Garrett httpwwwjjgnetia
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
The Strategy Plane 戰略層
The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate
What do we want to get out of this productWhat 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
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
The Strategy Plane 戰略層 Business Goals amp User research
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
The Scope Plane
The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site
For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope
what we want and what our users want we can figure out how to satisfy all those strategic objectives
Defining the Scope- Reason 1 So You
Know What Yoursquore Building
- Reason 2 So You Know What Yoursquore Not Building
Functionality and Content
Defining Requirements Functional Specifications
- Writing It Down Content Requirements Prioritizing
Requirements
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
The Structure Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart
Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user
Defining the Structure Interaction Design
- Conceptual Models- Error Handling
Information Architecture Structuring Content
- Architectural Approaches
- Organizing Principles- Language and
Metadata Team Roles and Process
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Structure
hierarchical structure(most common)
matrix structure(product sites)
organic structures(entertainment or educational sites)
sequential structure(instructional material)
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
The Skeleton Plane
Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text
The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it
First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml
On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships
Defining the Skeleton Convention and
Metaphorrsquo Interface Design Navigation Design Information Design
- Wayfinding Wireframes
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Interface Design Navigation Design Information Designinterface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
The Surface Plane
On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself
Defining the Surface Making Sense of the
Senses - Smell and Taste- Touch- Hearing- Vision
Follow the Eye Contrast and Uniformity Internal and External
Consistency Color Palettes and
Typography Design Comps and Style
Guides
Determine how that arrangement should be presented visually
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
About web user amp design processCreating Personas and scenarios
A persona is a fictional character constructed to represent the needs of a whole range of real users
By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Creating Personas Step 1 IDEOrsquos Ethnographic techniques
Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones
Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room 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 and impressions relating to a product
Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it
Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences
Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Creating Personas Step 2 Motivation Activities and Attitudes
MotivationAudiencersquos motivation leading to explore purchase and use of the selected product
ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product
AttitudesAudiencersquos emotional response when explore purchase and use of the selected product
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal
Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product
- Feel smart or in control
- Have fun
- Feel cool or hip or relaxed
- Remain focused and alert
Related to visceral processing how a user wants to feel
End goalA product or service can help accomplish such goals directly or indirectly
- Be aware of problems before they become critical
- Stay connected with friends and family
- Clear my to-do list by 500 every day
- Find music that Irsquoll love
- Get the best deal
Related to behavior what a user wants to do
Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product
- Live the good life
- Succeed in my ambitions to
- Be a connoisseur of
- Be attractive popular or respected by my peers
Related to reflection who a user wants to be
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Creating Personas Step 4 Designate persona type
A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features
This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well
httpwwwusercompersona-examplehtm
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Personas analysis
Task
A screen-based computer interface amp system for preparing and distributing menus
Personal Particulars
Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system
He supervises the chefs at each of the six sites and oversees cafeterias and catering services
Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant
Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University
Analysis
Task on high level management
Simple work flow Graphical user-interface Defaults Knowledgeable
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Persona-based scenarios
Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives
We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities
It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Purpose of scenarios
1 Use scenario as a means of imagining ideal user interactions
2 Use it to define requirements
3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice
4 Use the framework to enrich design details
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Types of scenarios
1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary
2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona
3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
About web user amp design processUser center design process
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
About web user User center design process
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
About web user User center design process research
Step 1Project Goal and Scenarios
A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits
Step 2Requirements
Requirements are the conditions(including constraints) to achieve the project goal
Step 3Specifications
Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Web Design (The Surface Plane)
RequirementsWhat is important
User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement
(5rsquoe usability principles)
Function requirement(Core amp Extended features)Content requirement
(Mood board Voice of tone Information Architecture)Technology requirement
(Use of technology)
SpecificationsHow to implement
Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation
TechnologyNomenclatureTechnology requirement Strategy
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
UCD in practiceStep 1 Persona
2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below
1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice
2Summarize research findings in terms of audience Motivation Activities and Attitudes
3Identify audience GOALS experience goal end goal and life goal
4Designate persona type
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
UCD in practiceStep 2 Scenarios interaction event
BEFORE SCENARIOS
2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced
List out 10 bullet- points to explain each of 2 typical events for
Before Interactive events P1 Before Interactive events P2
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
UCD in practiceStep 3 Scenarios frustrations encountered
FRUSTRATIONS ENCOUNTERED
HOW THEY ARE SOLVED BY THE MOBILE APP
Frustrations encountered P1
Frustrations encountered P2
Solved by the web P1
Solved by the web P2
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
UCD in practiceStep 4 Scenarios interaction event
AFTER SCENARIOS
Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks
List out at least 10 bullet- points to explain each of 2 future events
After Interactive events P1 After Interactive events P2
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
UCD in practiceStep 5 Scenarios storyboard
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
UCD in practiceStep 6 Prototype and Test amp Evaluate
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
UCD in practiceStep 7 Test amp Evaluate
UserEmily
FacilitatorRichard
webClive
ObserverPeter
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
About web user amp design processEvaluating web design
bull Build your prototype for evaluation
bull Applying UI design principles
bull Use of UI pattern
bull Desirability Test
bull Usability Checklist Review
bull Usability Expert Review
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Applying UI design principles
1Aesthetics
2Anticipation
3Autonomy
4Consistency
5Customization amp defaults
6Envisioning information
7Explorable interface
8Fittrsquos law
9Affordance amp feedback
10Memorability
11Metaphors
12Readability
13UndohttpwwwasktogcombasicsfirstPrincipleshtml
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Use of UI pattern
Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Build your prototype for evaluation
Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Desirability Test
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Usability Checklist Review
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Usability Expert Review
NavigationIt refers to the ability to find onersquos way around the digital content
FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided
ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction
Help and SupportUser should be able to get ready access to assistance
LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided
ContentThe page content is appropriate and supporting user goal and expectation
FeedbackThe user should kept informed of what is going on at any time
ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site
Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple
Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence
Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case study
bull Blackboard
bull 藝展計劃 ndash 香港藝術館實地應用指南
bull Pearson Houghton Mifflin Harcourt McGraw Hill
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case studyBlackboard
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case studyBlackboard Client stories
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case studyBlackboard Feature Showcase
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case studyBlackboard LearnPolyU
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background
bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo
bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)
bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS
bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Aim
bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism
bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art
bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide
bull These guides are made available for secondary school students visiting the museum
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Background information level
bull Basic information
bull Artist backgrounds
bull Historical cultural and aesthetic backgrounds
bull Forms and techniques
bull Themes and subject matters
bull Value and importance
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Interactive applications level
bull Issues and discussion
bull Links
bull Responses
bull Games and activities
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Flow
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case study Learning Company
bull Pearson
bull Houghton Mifflin Harcourt
bull McGraw Hill
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case study McGraw Hill Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Learn Smart
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case study area9 Software technologies
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case study PEARSON Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company
Case study Houghton Mifflin Harcourt Services-based education company