Creative  Design  &  Usability   Engineering
Overview <ul><li>Methodical, practical & systematic way of creating user interfaces and framework through which users inte...
User Experience Design - Methodology
Artifacts of Design Practice <ul><li>Designers create representations of sites at  multiple levels of detail </li></ul><ul...
Schematics <ul><li>Page structure with respect to information & navigation </li></ul>
Mock-ups <ul><li>High-fidelity, precise representation of page </li></ul>
Mock-ups
<ul><li>Research and Best Practices  </li></ul>
How the Eyes Move <ul><li>Series of movements and pauses, called  saccades  (ave. 100 msec) and  fixations  (ave. 250 msec...
How Users Look at News Web Sites <ul><li>Start in upper left quadrant </li></ul><ul><li>Users look at text first </li></ul...
Response Times <ul><li>The 3 Important Limits </li></ul><ul><ul><li>0.1 second  is the limit for having user feel system i...
Color Schemes <ul><li>Monochromatic </li></ul><ul><li>Analogous </li></ul><ul><li>Complementary </li></ul><ul><li>Triadic ...
Costco Implementation <ul><li>Brand colors used across the Design  (  Red  and  Blue  as in  Logo ) </li></ul><ul><li>Colo...
Text and Background <ul><ul><li>Maximize difference of intensity </li></ul></ul><ul><ul><li>Don ’t use patterned backgroun...
How to Make Web Pages Readable <ul><ul><li>Use scannable text </li></ul></ul><ul><ul><ul><li>Highlighted keywords </li></u...
Costco Implementation <ul><li>Smart usage of text through Different Font Style, size and color, to create Emphasis on what...
Skill Sets <ul><li>Illustration  </li></ul><ul><ul><li>Corel Draw </li></ul></ul><ul><ul><li>Adobe Freehand </li></ul></ul...
Skill Sets <ul><li>Digital Audio/Video  </li></ul><ul><ul><li>Adobe Premier </li></ul></ul><ul><ul><li>Windows Media Produ...
Online Design work www.vayama.com www.onhotels.com www.sotctours.com  www.costcotravel.com  www.alaska.org  www.classicvac...
Thank You Engineering Business Outcomes <ul><ul><li>For more details email  [email_address] </li></ul></ul>
Upcoming SlideShare
Loading in...5
×

Creative Design Process and Best Practices

2,043

Published on

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.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,043
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.
  • Usability Engineering is a planned &amp; methodical approach to developing any products &amp; 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
  • Interaction: Determine the goals for the solution from the perspective of the user and the business Determine the user profile, user needs, user behaviour &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; feel demonstrated through UID.    
  • Mention that these are “real artifacts.”
  • 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.
  • 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.
  • Creative Design Process and Best Practices

    1. 1. Creative Design & Usability Engineering
    2. 2. Overview <ul><li>Methodical, practical & systematic way of creating user interfaces and framework through which users interact with applications/websites </li></ul>Usability Engineering/Human Computer Interaction/ Interaction Design/User Experience Design
    3. 3. User Experience Design - Methodology
    4. 4. Artifacts of Design Practice <ul><li>Designers create representations of sites at multiple levels of detail </li></ul><ul><li>Web sites are iteratively refined at all levels of detail </li></ul>Site Maps Storyboards Schematics Mock-ups <ul><ul><li>We will demonstrate the steps involved in design process by using the www.costcotravels.com example </li></ul></ul>
    5. 5. Schematics <ul><li>Page structure with respect to information & navigation </li></ul>
    6. 6. Mock-ups <ul><li>High-fidelity, precise representation of page </li></ul>
    7. 7. Mock-ups
    8. 8. <ul><li>Research and Best Practices </li></ul>
    9. 9. How the Eyes Move <ul><li>Series of movements and pauses, called saccades (ave. 100 msec) and fixations (ave. 250 msec) </li></ul><ul><li>Eyes follow a scanpath </li></ul>[Eyetrack III, Poynter Inst. 2003]
    10. 10. How Users Look at News Web Sites <ul><li>Start in upper left quadrant </li></ul><ul><li>Users look at text first </li></ul><ul><li>Users look at the first few words of headlines </li></ul><ul><li>Users read five headlines before clicking </li></ul><ul><li>“ Banner blindness” - users don’t look at ads or quickly look away </li></ul><ul><ul><li>Text ads viewed more than graphic ads </li></ul></ul>[Eyetrack III, Poynter Inst. 2003]
    11. 11. Response Times <ul><li>The 3 Important Limits </li></ul><ul><ul><li>0.1 second is the limit for having user feel system is reacting instantaneously </li></ul></ul><ul><ul><li>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) </li></ul></ul><ul><ul><li>10 seconds is limit for keeping user ’s attention focused on page (for longer delays, percent-done progress indicator should be used) </li></ul></ul>[Nielsen 1997, Miller 1968, Card et al. 1991]
    12. 12. Color Schemes <ul><li>Monochromatic </li></ul><ul><li>Analogous </li></ul><ul><li>Complementary </li></ul><ul><li>Triadic </li></ul>[Skaalid 1999, Classic Graphic Design Theory]
    13. 13. Costco Implementation <ul><li>Brand colors used across the Design ( Red and Blue as in Logo ) </li></ul><ul><li>Colors play important role to set the mood and touch upon the feelings of the User </li></ul>
    14. 14. Text and Background <ul><ul><li>Maximize difference of intensity </li></ul></ul><ul><ul><li>Don ’t use patterned background </li></ul></ul><ul><ul><li>Light on dark, dark on light? </li></ul></ul>
    15. 15. How to Make Web Pages Readable <ul><ul><li>Use scannable text </li></ul></ul><ul><ul><ul><li>Highlighted keywords </li></ul></ul></ul><ul><ul><ul><li>Meaningful sub-headings </li></ul></ul></ul><ul><ul><ul><li>Bulleted lists </li></ul></ul></ul><ul><ul><li>One idea per paragraph </li></ul></ul><ul><ul><li>Inverted pyramid style of writing (conclusion first) </li></ul></ul><ul><ul><li>Half the word count of conventional writing </li></ul></ul><ul><ul><li>No “marketese” </li></ul></ul><ul><ul><li>Credibility is important </li></ul></ul>[Nielsen, 2006]
    16. 16. Costco Implementation <ul><li>Smart usage of text through Different Font Style, size and color, to create Emphasis on what the user has to Focus </li></ul>
    17. 17. Skill Sets <ul><li>Illustration </li></ul><ul><ul><li>Corel Draw </li></ul></ul><ul><ul><li>Adobe Freehand </li></ul></ul><ul><ul><li>Adobe Illustrator </li></ul></ul><ul><li>Image Processing </li></ul><ul><ul><li>Expression Design </li></ul></ul><ul><ul><li>Adobe Photoshop </li></ul></ul><ul><ul><li>Adobe Fireworks </li></ul></ul><ul><li>Animation </li></ul><ul><ul><li>Adobe Flash </li></ul></ul><ul><ul><li>3D Studio Max </li></ul></ul><ul><ul><li>Swish </li></ul></ul><ul><li>Web World </li></ul><ul><ul><li>Expression Blend </li></ul></ul><ul><ul><li>Adobe Dreamweaver </li></ul></ul><ul><ul><li>Microsoft FrontPage </li></ul></ul>
    18. 18. Skill Sets <ul><li>Digital Audio/Video </li></ul><ul><ul><li>Adobe Premier </li></ul></ul><ul><ul><li>Windows Media Producer </li></ul></ul><ul><ul><li>Real Media Producer </li></ul></ul><ul><ul><li>Sound Forge </li></ul></ul><ul><li>Content Management Tool </li></ul><ul><ul><li>MS-CMS2002 </li></ul></ul><ul><ul><li>Ektron </li></ul></ul><ul><ul><li>Kentico </li></ul></ul>
    19. 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 <ul><ul><li>For more details visit creative.bsil.com </li></ul></ul>
    20. 20. Thank You Engineering Business Outcomes <ul><ul><li>For more details email [email_address] </li></ul></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×