Creative Design Process and Best Practices
20
www.bsil.com Creative Design & Usability Engineering
-
Upload
sumit-sheth -
Category
Design
-
view
2.255 -
download
1
description
Usability Engineering is a planned & methodical approach to developing any products & websites that works for the users and deliver the results that they are looking for. It’s a practical and systematic way of creating user interfaces and the framework through which a user would interact with the product or the website.
Transcript of Creative Design Process and Best Practices
www.bsil.com
Creative Design & Usability Engineering
Creative Design & Usability Engineering
www.bsil.com
Overview
Methodical, practical & systematic way of creating user interfaces and framework through which users interact with applications/websites
Usability Engineering/Human Computer Interaction/ Interaction Design/User Experience Design
2
www.bsil.com
User Experience Design - Methodology
3
www.bsil.com
Artifacts of Design Practice
Designers create representations of sites at multiple levels of detail
Web sites are iteratively refined at all levels of detail
Site Maps Storyboards Schematics Mock-ups
4
We will demonstrate the steps involved in design process by using the www.costcotravels.com example
www.bsil.com
Schematics
Page structure with respect to information & navigation
5
www.bsil.com
Mock-ups
High-fidelity, precise representation of page
6
www.bsil.com
Mock-ups
7
www.bsil.com
Research and Best Practices
8
www.bsil.com
How the Eyes Move
Series of movements and pauses, called saccades (ave. 100 msec) and fixations (ave. 250 msec)
Eyes follow a scanpath
9
[Eyetrack III, Poynter Inst. 2003]
www.bsil.com
How Users Look at News Web Sites
Start in upper left quadrant
Users look at text first
Users look at the first few words of headlines
Users read five headlines before clicking
“Banner blindness” - users don’t look at ads or quickly look away
Text ads viewed more than graphic ads
10
[Eyetrack III, Poynter Inst. 2003]
www.bsil.com
Response Times
The 3 Important Limits
0.1 second is the limit for having user feel system is reacting instantaneously
1.0 second is the limit for user’s flow of thought to stay uninterrupted (no feedback necessary, but user will lose feeling of operating directly on data)
10 seconds is limit for keeping user’s attention focused on page (for longer delays, percent-done progress indicator should be used)
11
[Nielsen 1997, Miller 1968, Card et al. 1991]
www.bsil.com
Color Schemes
Monochromatic
Analogous
Complementary
Triadic
12
[Skaalid 1999, ClassicGraphic Design Theory]
www.bsil.com
Costco Implementation
Brand colors used across the Design ( Red and Blue as in Logo)
Colors play important role to set the mood and touch upon the feelings of the User
13
www.bsil.com
Text and Background
14
Maximize difference of intensityDon’t use patterned backgroundLight on dark, dark on light?
Maximize difference of intensityDon’t use patterned backgroundLight on dark, dark on light?
www.bsil.com
How to Make Web Pages Readable
15
Use scannable text
Highlighted keywords Meaningful sub-headings Bulleted lists
One idea per paragraph
Inverted pyramid style of writing (conclusion first)
Half the word count of conventional writing
No “marketese”
Credibility is important
Use scannable text
Highlighted keywords Meaningful sub-headings Bulleted lists
One idea per paragraph
Inverted pyramid style of writing (conclusion first)
Half the word count of conventional writing
No “marketese”
Credibility is important
[Nielsen, 2006]
www.bsil.com
Costco Implementation
Smart usage of text through Different Font Style, size and color, to create Emphasis on what the user has to Focus
16
www.bsil.com
Skill Sets
17
Illustration Corel Draw
Adobe Freehand
Adobe Illustrator
Illustration Corel Draw
Adobe Freehand
Adobe Illustrator
Image Processing Expression Design
Adobe Photoshop
Adobe Fireworks
Image Processing Expression Design
Adobe Photoshop
Adobe Fireworks
Animation Adobe Flash
3D Studio Max
Swish
Animation Adobe Flash
3D Studio Max
Swish
Web World Expression Blend
Adobe Dreamweaver
Microsoft FrontPage
Web World Expression Blend
Adobe Dreamweaver
Microsoft FrontPage
www.bsil.com
Skill Sets
18
Digital Audio/Video Adobe Premier
Windows Media Producer
Real Media Producer
Sound Forge
Digital Audio/Video Adobe Premier
Windows Media Producer
Real Media Producer
Sound Forge
Content Management Tool MS-CMS2002
Ektron
Kentico
Content Management Tool MS-CMS2002
Ektron
Kentico
www.bsil.com
Online Design work
19
www.vayama.com
www.onhotels.com
www.sotctours.com
www.costcotravel.com
www.alaska.org
www.classicvacations.com
www.ftc-i.net
www.vayama.com
www.onhotels.com
www.sotctours.com
www.costcotravel.com
www.alaska.org
www.classicvacations.com
www.ftc-i.net
www.endurancegroup.com
mahades.maharashtra.gov.in
www.door2tour.com
www.proflowers.com
reservations.wynnlasvegas.com
www.voyage.tv
electronics.bluestarindia.com
www.endurancegroup.com
mahades.maharashtra.gov.in
www.door2tour.com
www.proflowers.com
reservations.wynnlasvegas.com
www.voyage.tv
electronics.bluestarindia.com
For more details visit creative.bsil.comFor more details visit creative.bsil.com
www.bsil.com
www.bsil.com
Thank YouEngineering Business Outcomes
20
For more details email [email protected] more details email [email protected]
