Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Usg presentatie 12 april 2010
Next

5

Share

Designing for the Unknown

Presentation given at OZCHI'09 Industry Case Studies.

This case study reviewed the challenges of developing a style guide (covering both interaction and visuals) to guide the design of future applications. Although the general usage context and audience could be inferred from existing web applications, no specific information regarding future workflows was available. The style guide therefore took the form of a framework that empowers non-UCD experts to design consistent and learnable applications – thereby increasing data integrity, as well as reducing stress and frustration for the end-users.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Designing for the Unknown

  1. 1. Designing for the Unknown @rfeijo OZCHI 2009 - Industry case study - 26 November 2009
  2. 2. About: Developing corporate UI standards & guidelines for web applications
  3. 3. Renato Feijó:
  4. 4. The Hiser Group: Hiser is an interface design company 3,800 projects Millions of customers using our designs 5,000 design evaluations with users 3,000 people trained on our courses 500 clients
  5. 5. standard |ˈstandərd| noun an idea or thing used as a measure, norm, or model in comparative evaluations guideline |ˈgīdˌlīn| noun a general rule, principle, or piece of advice.
  6. 6. Vitruvius: De Architectura - circa 25 BC Illustrations from the edition of Cesare Cesariano, Como, 1521
  7. 7. Vitruvius: De Architectura - circa 25 BC
  8. 8. Leonardo Da Vinci: Vitruvian man - 1487 Source: http://www.lucnix.be
  9. 9. Michel Thonet: Chair Nr. 14 - 1859 Source: http://www.thonet.de
  10. 10. Peter Behrens: AEG - 1907
  11. 11. Olivetti: 30’s - 70’s Source: http://www.flickr.com/photos/laurapopdesign/3366405064 Giovanni Pintori - 1936 Marcelo Nizzoli - 1949 Paul Rand - 1953
  12. 12. Le Corbusier: The Modulor - 1948 Source: http://daniloarquiteto.files.wordpress.com/2008/11/fig-06-modulor.jpg
  13. 13. Le Corbusier: The Modulor - 1948
  14. 14. BMW: 70’s Courtesy of BMW
  15. 15. 1986 Apple: Human Interface Group - 1978 Source: http://www.flickr.com/photos/boredzo/3689404945/
  16. 16. The project 2007 ➣ 2008
  17. 17. The client: NSW State government agency Seeking to improve consistency across in-house built web applications And to improve data accuracy & integrity
  18. 18. The context: Small team of solutions architects & developers - no designers Piecemeal approach to app development due to changing goals and budget cycles Legal framework and internal culture
  19. 19. The challenge: To design UI standards & guidelines for future apps, without being able to apply and test concepts with an actual app
  20. 20. Getting ready to design
  21. 21. First steps: Illustration by Renato Feijó - All rights reserved Understand general characteristics and attributes of the different user groups
  22. 22. First steps: Illustration by Renato Feijó - All rights reserved Understand the ways in which the direct and indirect user groups need to work with the applications
  23. 23. First steps: Characterize the issues associated with Illustration by Renato Feijó - All rights reserved the physical and organisational environment in which users perform tasks and identify the implications for design
  24. 24. First steps: Survey existing apps Illustration by Renato Feijó - All rights reserved
  25. 25. Setting the signposts
  26. 26. Solution Problem
  27. 27. Solution Problem
  28. 28. Defining design principles: Interaction Dialog and Experience Visual Layout and Presentation Web UI Technology
  29. 29. Interaction design principles: Consistency “Learneability” User control Minimized user memory load Simplicity “Make the user smart”
  30. 30. Visual design principles: Figure & ground Similarity Alignment Proximity Contrast Unity
  31. 31. Web design principles: Accessibility Web standards Semantic markup Graceful degradation Progressive enhancement Modularity
  32. 32. Typical design process: Interaction design Visual design Web design Milestone Milestone
  33. 33. The integrated design process: Interaction design Visual design Web design Review point Review point
  34. 34. Envisioning the solution
  35. 35. Looking through the design principles lens to envision Design patterns Page/screen types Layout & composition Typography Colours Code modules, etc
  36. 36. Illustrations by Renato Feijó - All rights reserved Design this to allow the construction of any of these
  37. 37. Defining layout behaviour: Hybrid: mix of fluid (percentages) and elastic (based on em units) html {font-size: 62.5%;} 16 px ÷ 0.625 = 10 px = 1 em body {font-size: 1.2em; line-height: 2em;}
  38. 38. Applying modularity: (12px) 12px A 20px ϕ= 1 + √5 / 2 ≈ 1.618... 20 ÷ 12 = 1.666...
  39. 39. Applying modularity:
  40. 40. Defining the baseline grid:
  41. 41. Defining the baseline grid:
  42. 42. Lessons learned: Designing corporate UI S&G’s without a sample app is difficult, but well worth it UI S&G’s are a key piece in helping organisations move up to the next level of the usability maturity model (UMM) ladder
  43. 43. Thank you
  • imara0604

    Jun. 9, 2011
  • rajendranmohanram

    Oct. 8, 2010
  • u106842

    Apr. 16, 2010
  • sachinbhavsar

    Apr. 14, 2010
  • Ombulante

    Apr. 13, 2010

Presentation given at OZCHI'09 Industry Case Studies. This case study reviewed the challenges of developing a style guide (covering both interaction and visuals) to guide the design of future applications. Although the general usage context and audience could be inferred from existing web applications, no specific information regarding future workflows was available. The style guide therefore took the form of a framework that empowers non-UCD experts to design consistent and learnable applications – thereby increasing data integrity, as well as reducing stress and frustration for the end-users.

Views

Total views

1,055

On Slideshare

0

From embeds

0

Number of embeds

9

Actions

Downloads

0

Shares

0

Comments

0

Likes

5

×