狠狠撸

狠狠撸Share a Scribd company logo

Creative Design Process and Best Practices

?Download as PPT, PDF?
?
Sumit Sheth
Sumit Sheth

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.

1 of 20
Creative Design & Usability Engineering
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
User Experience Design - Methodology
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 We will demonstrate the steps involved in design process by using the www.costcotravels.com example
Schematics Page structure with respect to information & navigation
Mock-ups High-fidelity, precise representation of page
Mock-ups
Research and Best Practices
How the Eyes Move Series of movements and pauses, called saccades (ave. 100 msec) and fixations (ave. 250 msec) Eyes follow a scanpath [Eyetrack III, Poynter Inst. 2003]
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 [Eyetrack III, Poynter Inst. 2003]
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) [Nielsen 1997, Miller 1968, Card et al. 1991]
Color Schemes Monochromatic Analogous Complementary Triadic [Skaalid 1999, Classic Graphic Design Theory]
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
Text and Background Maximize difference of intensity Don ’t use patterned background Light on dark, dark on light?
How to Make Web Pages Readable 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]
Costco Implementation Smart usage of text through Different Font Style, size and color, to create Emphasis on what the user has to Focus
Skill Sets Illustration Corel Draw Adobe Freehand Adobe Illustrator Image Processing Expression Design Adobe Photoshop Adobe Fireworks Animation Adobe Flash 3D Studio Max Swish Web World Expression Blend Adobe Dreamweaver Microsoft FrontPage
Skill Sets Digital Audio/Video Adobe Premier Windows Media Producer Real Media Producer Sound Forge Content Management Tool MS-CMS2002 Ektron Kentico
Online Design work 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 For more details visit creative.bsil.com
Thank You Engineering Business Outcomes For more details email [email_address]

More Related Content

Creative Design Process and Best Practices

  • 1. Creative Design & Usability Engineering
  • 2. 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
  • 3. User Experience Design - Methodology
  • 4. 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 We will demonstrate the steps involved in design process by using the www.costcotravels.com example
  • 5. Schematics Page structure with respect to information & navigation
  • 6. Mock-ups High-fidelity, precise representation of page
  • 8. Research and Best Practices
  • 9. How the Eyes Move Series of movements and pauses, called saccades (ave. 100 msec) and fixations (ave. 250 msec) Eyes follow a scanpath [Eyetrack III, Poynter Inst. 2003]
  • 10. 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 [Eyetrack III, Poynter Inst. 2003]
  • 11. 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) [Nielsen 1997, Miller 1968, Card et al. 1991]
  • 12. Color Schemes Monochromatic Analogous Complementary Triadic [Skaalid 1999, Classic Graphic Design Theory]
  • 13. 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
  • 14. Text and Background Maximize difference of intensity Don ’t use patterned background Light on dark, dark on light?
  • 15. How to Make Web Pages Readable 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]
  • 16. Costco Implementation Smart usage of text through Different Font Style, size and color, to create Emphasis on what the user has to Focus
  • 17. Skill Sets Illustration Corel Draw Adobe Freehand Adobe Illustrator Image Processing Expression Design Adobe Photoshop Adobe Fireworks Animation Adobe Flash 3D Studio Max Swish Web World Expression Blend Adobe Dreamweaver Microsoft FrontPage
  • 18. Skill Sets Digital Audio/Video Adobe Premier Windows Media Producer Real Media Producer Sound Forge Content Management Tool MS-CMS2002 Ektron Kentico
  • 19. Online Design work 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 For more details visit creative.bsil.com
  • 20. Thank You Engineering Business Outcomes For more details email [email_address]

Editor's Notes

  1. We realize that what matters most are not just great technology solutions, but building great presentation systems that shape the user experience and create positive brand interactions, which ultimately translate to greater value for the client and better-engineered solutions at the back-end.
  2. 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
  3. Interaction: Determine the goals for the solution from the perspective of the user and the business Determine the user profile, user needs, user behaviour & concerns and target usability requirements Determine feature functionality Evaluate existing versions of the product (If any) Perform a competitive analysis ? Ideation: Sketch out information architecture & navigational flow at an abstract level Create and project an identity that ’ s true to the core brand properties and can be owned by no one else Develop and streamline content Ideating concept & theme Design interface layout keeping the brand orientation and usability aspect in mind. Interactive visual presentation (conceptual prototype) for the client ’ s approval. Repeat this process (production iteration) until the business goals and user needs are met. ? Implementation: Create templates and perform validation, compatibility, optimization testing. Development of UID - user interface design (Functional prototype). Evaluate performance through testing, quality assurance, usability testing, compatibility & scalability testing Repeat this process (production iteration) until the business goals are met. The final deliverable of this process is relevant functionality, strong branding, user-centric design and consistent look & feel demonstrated through UID. ? ?
  4. Mention that these are “real artifacts.”
  5. Represents the information and navigation content of a page. Graphic elements are used such as shading, typography, line, layout – but these are not meant to be taken literally from a graphic design standpoint. These would often be roughed out using pen and paper and then created using a graphics program like Illustrator. Sometimes in HTML, sometimes in Word, sometimes in Visio.
  6. Sometimes roughed out on paper, though if working from schematics perhaps not. Usually created in Photoshop, sometimes would evolve to “dead” or “semi-active” HTML.