Designing for the Unknown
•
6 recomendaciones•459 vistas
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.
Recomendados
Más contenido relacionado
Similar a Designing for the Unknown
Similar a Designing for the Unknown (20)
Último
Último (20)
Designing for the Unknown
- 1. Designing for the Unknown @rfeijo OZCHI 2009 - Industry case study - 26 November 2009
- 2. About: Developing corporate UI standards & guidelines for web applications
- 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. 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. Vitruvius: De Architectura - circa 25 BC Illustrations from the edition of Cesare Cesariano, Como, 1521
- 7. Vitruvius: De Architectura - circa 25 BC
- 8. Leonardo Da Vinci: Vitruvian man - 1487 Source: http://www.lucnix.be
- 9. Michel Thonet: Chair Nr. 14 - 1859 Source: http://www.thonet.de
- 10. Peter Behrens: AEG - 1907
- 11. Olivetti: 30’s - 70’s Source: http://www.flickr.com/photos/laurapopdesign/3366405064 Giovanni Pintori - 1936 Marcelo Nizzoli - 1949 Paul Rand - 1953
- 12. Le Corbusier: The Modulor - 1948 Source: http://daniloarquiteto.files.wordpress.com/2008/11/fig-06-modulor.jpg
- 13. Le Corbusier: The Modulor - 1948
- 14. BMW: 70’s Courtesy of BMW
- 15. 1986 Apple: Human Interface Group - 1978 Source: http://www.flickr.com/photos/boredzo/3689404945/
- 16. The project 2007 ➣ 2008
- 17. The client: NSW State government agency Seeking to improve consistency across in-house built web applications And to improve data accuracy & integrity
- 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. The challenge: To design UI standards & guidelines for future apps, without being able to apply and test concepts with an actual app
- 20. Getting ready to design
- 21. First steps: Illustration by Renato Feijó - All rights reserved Understand general characteristics and attributes of the different user groups
- 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. 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. First steps: Survey existing apps Illustration by Renato Feijó - All rights reserved
- 26. Solution Problem
- 27. Solution Problem
- 28. Defining design principles: Interaction Dialog and Experience Visual Layout and Presentation Web UI Technology
- 29. Interaction design principles: Consistency “Learneability” User control Minimized user memory load Simplicity “Make the user smart”
- 30. Visual design principles: Figure & ground Similarity Alignment Proximity Contrast Unity
- 31. Web design principles: Accessibility Web standards Semantic markup Graceful degradation Progressive enhancement Modularity
- 32. Typical design process: Interaction design Visual design Web design Milestone Milestone
- 33. The integrated design process: Interaction design Visual design Web design Review point Review point
- 35. Looking through the design principles lens to envision Design patterns Page/screen types Layout & composition Typography Colours Code modules, etc
- 36. Illustrations by Renato Feijó - All rights reserved Design this to allow the construction of any of these
- 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. Applying modularity: (12px) 12px A 20px ϕ= 1 + √5 / 2 ≈ 1.618... 20 ÷ 12 = 1.666...
- 40. Defining the baseline grid:
- 41. Defining the baseline grid:
- 46. 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
- 47. Thank you
Notas del editor
- Hi This case study is about the development of corporate UI standards & guidelines, aka Human Interface Guidelines. Some people also refer to them, wrongly or rightly, as styleguides. In this project, couldn’t use an existing application - or build a dummy one - to try and test concepts. The resulting styleguide would be applied to future, at that point undetermined applications. I will talk more about the thinking and the process that happened behind the scenes than the actual resulting document.
- My name is Renato Feijó, I’m a Brazilian interaction designer and I have a graphic design and architecture background. I came to Australia about 3 years ago from Switzerland, where I had the chance to design web sites and applications for a number of global brands (and others not so global).
- I work for The Hiser Group, in Sydney. We also have an office here in Melbourne and we are very proud sponsors of this conference.
- Standards exist since immemorial times. They are useful to regulate exchanges between people and compare things. I’d like to do a historical survey of styleguides before digging deep into the details of the project, mainly because many of the ideas and concepts presented in the next few slides informed our decision-making process.
- Perhaps the earliest example of a styleguide is Vitruvius book “De Architectura”, aka “The Ten Books of Architecture”. It gives precise instructions to design and build buildings according to the principles of the Greek and Roman orders. It also contains precise descriptions of how to harmoniously work out plans and façades compositions using the golden section (or golden ratio)
- Vitruvius was an architect, builder, inventor, public administrator, and ballistic engineer. His scope of work went far beyond what today’s architects can imagine. Here’s him presenting his ideas to Cesar Augustus, with an early version of PowerPoint.
- His writings were re-discovered in the Renaissance period, and his ideas influenced a lot of thinkers at that time. Here’s the famous Da Vinci illustration of the Vitruvian Man, based on what Viruvius thought were ideal human body proportions. Many of Vitruvius’ ideas are still in use today.
- The next important development happened in the industrial era. At that time, furniture-making was a painful and lengthy process for today’s standards, involving complicated joints and intricate carvings to hide those joints. Michel Thonet, an Austrian cabinet maker, developed a repeatable process for bending wood that allowed him to design lightweight structures. He then had this brilliant idea of parts that could be shipped anywhere in the world, and assembled by anyone. The chair #14 has celebrated its 150th anniversary and is still sold today, which makes it arguably one of the most successful products of all times. A cargo box could contain 36 chairs and this concept is the most important design principle at current-day businesses such as Ikea. Michel Thonet is considered my many design historians as the first industrial designer.
- Also worth of mention is the work of Peter Behrens for AEG. Behrens was commissioned as an external “artist” to look after the design of all AEG products. His scope of work was also astounding: he designed everything for AEG, from buildings to products, through typefaces, logo and posters. Behrens, an architect by training, was member of the German Werkbund, and stars like Walter Gropius, Mies van der Rohe and Le Corbusier worked for him in their early careers, and his work was highly influential for many generations after him.
- Olivetti was among the first firms to understand the importance of unity in design. From the prewar to the postwar, and beyond, for a long period of time, Olivetti harnessed the genius of multiple designers to deliver on a consistent corporate image. This is different from the Peter Behrens’ example because there are multiple designers involved, and this is perhaps the first successful example of a corporate identity, which inspired many american business of the postwar, including IBM.
- Also worth of note is Le Corbusier’s Modulor, which was his hat-tip to Vitruvius. What makes this concept important is the notion of human proportions as the starting point of all design considerations.
- This was conceived at the early days of human factors as a field of study, after cabin design became critical to airplane engineering during the war.
- BMW and Braun were among the first to extend the idea of unity in style across their product range. In this photo, we can see the same stylistic principles applied through the 3, 5 and 6 series, which led some of the cynical critics to say “Same sausage, three lengths”
- Last but not least is Apple’s efforts to develop UI guidelines for all of their products very early in the company’s history. They basically wrote the book on UI S&G’s
- All of those examples helped to frame our minds for this project. Now let’s see..
- The client - who decided to remain anonymous today - came to us with a very clear request: they wanted the “coffee-table” book. What was intriguing, though, was the need to improve data accuracy and integrity. This, we initially thought, would be hard to address.
- Because the organisation is ran according to a precise legal framework, every time that legislations changes, so their systems need to change. On top of that, an order and command type of culture was not really conducive of positive collaboration between people.
- When designing UI S&G’s, it is key to have an existing or dummy application to experiment with and try out concepts. For reasons beyond our reach, we could not do that: we had to find a workaround.
- So, if you are familiar with UCD methodologies, some of the following will be familiar to you.
- We first identified user groups and modelled their profiles.
- This was a key part of the process, that helped us to identify common tasks and workflows. These were then synthesised and used to form a matrix mapping to interface elements or design patterns that supported those tasks and workflows. It was at this stage that we understood what they meant by improving “data accuracy and integrity”. You saw Bill Moggridge’s example of a person trying to buy a drink with her mobile phone: at some point in the middle of the process, she was asked to fill in a form, which had nothing to do with “getting a drink”, the task at hand. My client’s applications had numerous examples of this kind, and people just filled in the forms with whatever data, only to get past that step as quickly as possible.
- Understanding the environment in which people perform their tasks, as you know, is also important for informed decision making in UI design.
- To identify “design opportunities”, as the jargon says, in our profession.
- Wouldn’t it be beautiful if moving from the problem space to the solution space could be done in a straight line?
- The reality is that design ideation and experimentation can take you into a rather chaotic route
- The best thing to do to avoid going all over the place is to set clear signposts, in other words, to define the key design principles that apply to your project. In this case, we chose a integrated approach to UI design and looked at three levels of principles at the same time (UI technology as in the actual UI matter)
- These were our key interaction design principles. There are many others around, but those were the most important to our project. Consistency was a high priority to the client. Simplicity, was sort of a self-imposed principle - but a very important one nevertheless - because we wanted developers to be able to build easy-to-use applications. Simplicity also applied to the final deliverables - which included code - and, without being patronising or condescending - the whole stuff should be easy for developers to implement.
- Graphic design principles were also prioritised.
- Finally, we made a list of web design principles. In reality, we helped them to define their accessibility policy well before we started designing. We also helped them to define their policies defining what could be built using web based technologies and what should be better acquired as off-the-shelf desktop products or hacked in-house, e.g GIS technology We felt very strong about modularity. At that time, libraries such as YUI and others were in their early days and browser compatibility was - and still is - a big barrier
- The typical design process - in most organisations - unfolds as shown. This is a curiosity, because this waterfall model is the antithesis of the inherently iterative nature of any UCD method. Important information and knowledge is lost at every milestone and, worse, some key design constraints relevant to people coming next in the line is often overlooked by the people preceding them, which results in more research done late in the process. More research often translates in new data, which creates a basis for challenging design decisions made in the previous step. Who in this room hasn’t heard a developer say “it can’t be done that way”?
- To harness and leverage the knowledge and the experience of the team, we employed an integrated approach to design - not unfamiliar to those versed in agile methodologies. With this approach, ideation, exploration and selection can be done almost simultaneously across the three design layers. This led to increased speed and, we believe, superior results.
- Here’s how it worked:
- With our minds framed by our ancestors’ teachings, the knowledge acquired during the research phase, and our professional experience, we looked through our design principles lens to unveil the likely solutions. We were not designing full-blown applications, or page templates...
- At a conceptual level, we were designing all the bits and pieces that allowed for a varied, unexpected, unanticipated number of solutions. Our building blocks should nevertheless support unity.
- What are the building blocks of UIs? Code snippets. By defining some general rules, we could better support unity and, at the same time, achieve simplicity. In HTML/CSS, it’s easy to define horizontal rhythm - to create columns, for instance. Vertical rhythm, however, is a different story. Due to poor browser support of the “height” CSS declaration, and the ways that increasing and decreasing text size work in a browser, the workaround consists in determining a line-height. The layouts should maintain their integrity (without being pixel-perfect) across a variety of screen resolutions and platforms. We therefore used relative units, such as percentages and EMs, instead of pixels to ensure scalability, and we used a trick to get a round EM value. Here’s how it works: the default font size in all of the mainstream browsers is set to 16px. With the body element declaration, we get a computed font size of 12px and line-height equal to 20px.
- So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi) On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
- So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi) On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
- So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi) On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
- So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi) On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
- So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi) On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
- So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi) On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
- So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi) On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
- So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi) On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
- So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi) On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
- So here’s our hat-tip to Vitruvius: On the left, you have a golden rectangle, with the mathematical value of the golden section (phi) On the right, you’ve got my elemental unit. This will be used to set the playground. I could’ve gotten even closer to the golden section if I had used 13px x 21px instead, but then the font size would be too big.
- The baseline grid constitutes the superstructure allowing the various building blocks to click into place...
- The baseline grid constitutes the superstructure allowing the various building blocks to click into place...
- Thus. This is a generic screen, that was used as proof of concept and proved to be a nice platform to explain to our client how everything worked. You can see how the various interface elements align vertically and horizontally, and how they can be ordered side by side, or stacked up one on the top of each other.
- Here’s an example of a high-fidelity wireframe of a mapping interface.
- Here’s a an actual screen with colour scheme applied. We had 5 different themes, mainly because the client couldn’t agree on a single colour scheme and asked us to develop 5 in total. This turned out to be a good idea, since we could develop at least one high-contrast version for people with visual disabilities. The colour scheme can be changed with the element inside the toolbox. You can see examples of two visible design patterns: the tab panel (inside the page), which supports non-linear workflows, and the date picker defaulting to today’s date to make the user smarter. I’m sorry I can’t go into more details of the final outcomes, that’s all I can show you.