Got the Blues? Visual Design For Any Enterprise UI, Worldwide. Localization World Dublin 2014 #locworld
•
5 gostaram•1,763 visualizações
Presentation to Localization World in Dublin 2014 on visual design for any enterprise UI. Lots of localized examples and things you can apply when designing and developing a UI without being a UX expert. Ideal for PMs, developers, and anyone wanting to know what's important in hooking users and ensuring that enterprise UI are usable and therefore beautiful.
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a Got the Blues? Visual Design For Any Enterprise UI, Worldwide. Localization World Dublin 2014 #locworld
Semelhante a Got the Blues? Visual Design For Any Enterprise UI, Worldwide. Localization World Dublin 2014 #locworld (20)
Mais de Ultan O'Broin
Mais de Ultan O'Broin (15)
Último
Último (20)
Got the Blues? Visual Design For Any Enterprise UI, Worldwide. Localization World Dublin 2014 #locworld
- 1. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Got the Blues? Visual Design For Any Enterprise UI, Worldwide Oracle and the presenter acknowledge the original copyright of sources and screenshots in this presentation Ultan Ó Broin (@localization), Director, Global Oracle Applications User Experience June 2014
- 2. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. About @localization • Microsoft L10n • Oracle T9n, I18n, UX Developer Relations • Multilingual Magazine • Blogger • Author, Academic • May Not Necessarily Reflect Oracle Views In Mid-Life Crisis Since About 1996
- 3. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. UI Content Isn’t King. Context Is. Waàáâäæãåāy Too Many L10n Assumptions
- 4. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. User Experience Passion and Process 1Empathize We observe real users worldwide to understand work styles, their feelings and pain points that arise. 2 Imagine We sketch ideal experiences to resonate with users’ expectations, finalizing designs with user input. 3 Innovate We stay ahead of the curve, exploring technologies, ready to deliver new levels of productivity and satisfaction. 4 Communicate We explain why UX matters in business, and we share insights and science to build great- looking, simple, apps in the cloud. 5 Prove Before and after products are available, we scientifically test and prove the user experience in our labs and where users work.
- 5. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Ethnography: Research in the Wild Observing Real Users, Real Tasks, Real Environments
- 6. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Visual Design of a User Interface • Visual style is how the application looks. • Interaction is how the applications feels. • Content strategy is how the application sounds (or speaks). Integral to User Experience
- 7. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. What Color is Facebook? Blue, Blue, Blue
- 8. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. In 50 milliseconds: 7 Things To Apply 1. Branding (the hook) 2. Color 3. Contrast 4. Layout 5. Spacing 6. Text and fonts 7. Icons Apply with coding best practices and enterprise methods. Design UIs with Deliberation and Granularity
- 9. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. 1. Branding: more than a logo • Logo • Color usage • Font • Layout • Photography and supporting artwork • Overall “personality” or impression of the design Personality: Engage and Hook
- 10. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Branding and navigation bar remain consistent throughout all pages of the site Most color on the page comes from the product images themselves
- 11. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Nearly all of the rest of the UI is rendered in grays and blacks, which keeps it from competing with the product images Consistent font usage throughout the site from page to page
- 12. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Black text helps draw the eye to the different sections of the page; minor text is gray Text size tells you that this section is less important than the section above Product selectors are placed on top of the page under the primary navigation because they affect the content below them
- 13. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Some elements are in color to help draw the eye because they have extra importance
- 14. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Apple Localized: World’s Number 1 2 Brand Japan, Brazil, France
- 15. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Light/Warm Advances, Cool/Dark Recedes AA AA Visual Test
- 16. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Color Deliberations Targeted use of branding color (red) Branding color applied to UI element with varying location (hypertext)
- 17. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Inferred Meaning of Colors Common status icons Oracle Application Development Framework message icons Convention and Culture
- 18. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. In the Pink: From Brasil to Italia (via Dublin)
- 19. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. 3. Contrast • Difference between two nearby colors. • Contrast means legibility of text. • Optimal black text on a white background. • Poor contrast means eye strain for all users… • … and means illegible pages for users with vision impairment. • Accessibility standards require minimum level of contrast. • Product and productivity impact Legibility of Text
- 20. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. The Squint Test: Contrast text text text text text text text text text text text text This is black text on white, which is the best contrast you can get. It has a luminosity contrast ratio of 21.00:1 Minimum ratio for accessibility standards: 4.5:1 (normal size text). Source for ratio calculations: juicystudio.com This is black text on #D8E9F4, which still has an excellent contrast ratio (16.88:1). Sometimes a slight tint to the background can alleviate eye strain from the starkness of black/white. This is black text on #3775B5, which has a contrast of 4.37:1 and works better for large text. It does not work well for small text. This is black text on #144C86, which has a contrast of 2.41:1. It fails for both largeand small text.
- 21. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. 4. Layout • Pages are generally read in the same order in a given language (from left to right, top to bottom in en-US). • Sections of the page ordered similarly. • Important content is “above the fold”, disclosed not hidden in page • Anticipate expansion reasonably… • Content should align vertically and horizontally to create logical groups • Speeding the eye’s scanning of the page means faster completion Reflect Scan Patterns of the Locale
- 22. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Layout of Content: Reading Order Left-to-right text languages Right-to-left text languages
- 23. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Jakob Nielsen’s “F” Shape Eye-tracking study of users scanning the page (source: www.useit.com) Fusion Applications Help eye tracking heatmap (with click points) OOW 2009 usability testing
- 24. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Enterprise Page Using Same Principles Branding and highest-level actions Secondary navigation that drives the content area Main content area with transaction
- 25. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Misalignment: Death by a Thousand Cuts
- 26. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Alignment (Easy On The Eye)
- 27. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. 5. Spacing • Blank areas break up page density, give the eye a place to rest or focus. • Padding separates objects and information into logical relationships. • Unintentional spacing and padding means unintentional relationships. • Users having to think mean lost productivity in business. • Expansion space – height, diacritics, words… White Space Works in Every Language
- 28. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Space Assumptions and Reality: Japan Airbnb Insight on Common Wisdom
- 29. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Padding Creates Resting Places
- 30. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Padding Confusing padding Good padding The Proximity Principle
- 31. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. 6. Fonts and Text • Fonts part of the personality of the page. • Bold text draws the eye, use deliberately. • Italic text difficult to read online, not global. • Font size less than 12 pt problematic in Asian locales. • Users scan larger text to get ‘gist of the scene’ (titles before field labels). • Fonts vary by OS and device, fallback fonts … • but Unicode fonts rock harder… Basic Readability Principles
- 32. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Enterprise Conservatism in Fonts High Legibility Low Legibility Longer Shelf Life Gets Outdated Quickly Conservative Flashy
- 33. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Using Bold Text Strategically
- 34. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. 7. Icons • Eye-candy with functionality… • Users process small number of different icons (approximately 5 maximum). • 10 different kinds of status? Consider text. • Vary icons by shape as well as color – accessibility . • Enable users to spot the differences with a quick scan. • Consistent style. Perhaps above all…
- 35. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Icons: Text, Conventions, and Bi-Di
- 36. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Global Icons Guidelines: BS Central Sound in Part, With Context • Usual caveats: Body parts, animals, flags.. • But is it just bad UX and translatability • Remember the enterprise context • Social media, mobility, globalization… • … common sense
- 37. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Make it Easy in the Enterprise Simple to Use, Simple to Build, Simple to Sell
- 38. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Implementation: Global Coding Best Practices • Find a user, test with users. Real context of use. • Feng Shui Frameworks, Multilingual architecture, separate tables, logic, content, data. • Render and response at run time (RWD). • Detect language, region, country, allow session override. • Unicode fonts in UIs. • Centralize styles in CSS, avoid inline, limit language specifics (XLST/CSS). • Choose global icons. • Prepare directional mages in the case of BiDi. • Enable settings and personalization for simple changes. • Enterprise methodology (scale, maintenance, performance, security, …)
- 39. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Beauty and Usability Expectations versus Evidence “What is usable is beautiful.” (Measuring Usabilty, 2013) Poor usability leads to frustration.. Put users in a bad mood and made them rate the product as less beautiful than before interacting (Google Research, 2012)
- 40. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Resources 1. Why Facebook is Blue: The Science of Colors in Marketing 2. How Colors Advance and Recede in Art 3. The Feng Shui of Fusion 4. F-Shaped Pattern for Reading Web Content 5. Measuring the Visual Appeal of Websites 6. Localisation of Visual Content, Images and Icons 7. iOS7 User Experience Appraisal 8. Icons: Global UX Considerations 9. Building International Product at Airbnb: SF Globalization Meetup January 2014
- 41. Copyright © 2014, Oracle and/or its affiliates. Presented at Localization World Dublin June 2014. Share-alike for non-profit reasons and acknowledge. Content Strategy? Designing Effective User Interface Content: Georgia Price and Karen Scipi The Unadorned Truth About Terminology: Initiatives, Practices, Melodrama: Georgia Price and Karen Scipi
Notas do Editor
- Hi, I’m Ultan O’Broin, Director of Global User Experience with the Applications User Experience team. Welcome to the Visual Design for Any Enterprise User Interface (UI) course. I subtitled the course Got the Blues, because well, you’ll find out… I hope you can take away these design best practices for use with the components in your development environment or toolkits that you use to build great UIs for enterprise applications. Let’s explore this topic, and have some fun with it, too…
- About me. My views are personal, and may not necessarily reflect Oracle views and opinions on the content discussed and presented here.
- Much of what we read and hear about globalizing UIs has no grounding in UX research or proven by user testing. The enterprise context changes everything you know about web design for example. We are often confronted by outdated web site UI assumptions, by papers and books that are little more than academic navel gazing, and by general assertions that don’t take into account the context of the modern enterprise. Great design must be matched by things like security, performance, scalability, maintenance. No CIO makes decisions based on look and feel alone… We live in a globalized world, informed by the internet, and technology. Often we see guidelines that are dominated by corner cases because they catch the eye. This example of gestures from the US Brazil is stretching it… they are not even the same gesture. And when would you ever use this in a UI? More examples are throughout this presentation.
- Instead to build a great user experience is an ongoing, iterative process that always keep users at the center of decision-making. The OAUX team applies art, design, science, and technology to bring the UX messages and design philosophy to life as software. Because user experience is about everything an applications user encounters on the journey to task completion, the team has a complete range of skills and a thorough process: Firstly, we observe and listen to real users doing real tasks in real work environments, worldwide. We empathize with users to create a feeling. analyze the findings and identify the patterns of work that matter. Next, we sketch solutions to improve these work experiences, targeting users’ needs, and we refine the final design with users’ input. We innovate with the latest technology, ahead of the curve, so we’re able to deliver optimal experiences that augment and automate work to new levels of productivity and user satisfaction. By reaching out to partners and customers we communicate how UX benefits their businesses and their users, and we share our scientific and design expertise and techniques so that developers can easily build great-looking, mobile, and simple apps in the cloud. And, finally, we scientifically prove the usability of our applications’ designs release in our mobile usability labs before release, and we continue to measure how applications perform in the hands of users in work, on the street, and where ever we meet them. That’s a lot of work! But you can scale this process down by finding 3-5 real users and relying on credible insights that you then validate with those users.
- Global user experience relies on global users. Conduct research in the wild, or ethnography as we would call it! For example: Role of Student: using ipad to control the monitor as mouse track pad Role of Retail Merchandiser Manager in China – using phone to track counts of products Student– Playing game on tablet while in class Technical Sales Engineer – using both laptop and tablet for his work Sales rep in China – Checking his phone in subway Swedish journalist– Sharing a presentation with a colleague Sales Rep- Stopping after visiting client to document what happened Role of Inventory technician – scanning bar code on paper This is the kind of research that informs the final design of our mobile applications, such as Oracle Voice, a fun Apple Siri-like way for sales reps to use data in the Oracle Sales Cloud just by speaking to their iPhone. Notice how it has a keyboard option for typing? Guess why?
- Visual style or design is an integral part of the overall enterprise user experience. It’s about how the application looks. Visual design fits in with the application’s interaction that creates how the application feels, and with the application content’s tone and style to create a sense of how the application communicates with users. I do not cover content in this presentation, so if you’re a language geek, this is not your thing, though I can recommend some great references for you to pursue if you wish.
- Ever been asked “What color is Facebook”? You immediately know that it’s blue. But, it’s not by accident that it’s blue. Blue is the color of the intellect, of the mind, making it the color of communication. Social media is all about communicating. Color preference surveys put blue on top, as the most popular shade for men and women. It’s not a shade that easily polarizes opinion. With so many natural instances of blue around us (the sky, the sea, and flora) blue is about keeping things tranquil. Blue also travels well, being more culturally neutral than certain other colors, and it doesn’t present many internationalization or localization problems. It’s the world’s most popular color, say the surveys. But, of course, there are different shades of blue! Color theory says that dark blue shades generate a feeling of reliability and stability (and Facebook does present us with trust issues), while lighter blues are more relaxing and calming (many mobile apps seem to fall into this category), or are uplifting and energizing depending on how bright the shade is (the brighter blues of Skype or Twitter’s bird logo, for example).
- Note that what I will talk about and show in this presentation are fundamentals. These are the higher level things that developers can do to get a great-looking user interface, without having the benefit of a visual artist or a user interface designer to do that work. These are ones that are specific to applications too. We picked these topics by running down an applications page, in granularity. We started with branding because it can include all of the things that follow, shown here. We are talking about branding at a high level: Color, contrast, layout, spacing, font choice, and so on. This is where users begin to identify with brands on an emotional, recognition level. Branding is a great guide to use for your visual design. If you are building an application or site for an audience, use branding as the user ‘hook’. Things such as color, contrast, layout, spacing, font and text, these are the key elements of web design, product design, that are applicable across different applications: consumer web sites, a web application for your desktop, a Cloud application service, or an app on your mobile phone. It could even apply to websites or portals, or to support or online help content. Studies have shown how users could form reliable impressions of a website’s visual appeal in as little as 50 milliseconds! (by comparison, it takes 250 milliseconds to blink). For the academics, who want to read more: Source: Lindgaard G., Fernandes G. J., Dudek C., & Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour and Information Technology, 25 (2), 115 – 126.
- These are the kind of visual areas that developers will need to know about to support that brand’s messages. These visual elements impact users’ perception of the user interface. The more that these are considered the more complete, the more well thought-out the page will look, and the more it will be perceived well. On a page where the developer has thought out the detail, the user’s brain processes it and makes a judgment about it. The brain thinks: “That gray makes perfect sense with the UI” or “That orange color is used in certain areas to draw attention” or “All the photographs look like they were taken by the same photographer”. Users then appreciate the deliberateness of the design. That’s the Chinese logo for Coca-Cola by the way. You need to consider a localization strategy for logos too, and there is a great article on that at: http://www.sajan.com/blog/defining-localization-strategy-logos-fit-global-plans/). Developers may not have the time to get to all of the areas shown. But, remember the more they are deliberately considered in the design, the more they get noticed, even though it might be subconsciously. This really affects the impression that a user is left with. Visual design of UIs can certainly arise passions. Think of the redesigned (in September 2013) Yahoo! logo. It didn’t always impress everyone, but everyone talked about it (see this article for more: http://www.forbes.com/sites/roberthof/2013/09/05/yahoos-new-logo-fails-to-impress-but-people-are-talking-about-it/). But is a logo enough on its own to change user perceptions? No, it’s part of the overall design and customer experience strategy. Time will tell how successful this has been, though testing in advance is key. A good test of the power of visual design in the UI is to bring up a page and block out the logo and ask whose page it is. Those that are identifiable have strong brand presence. When it comes branding we can often cite Apple as the great example. Apple has very comprehensive branding guidelines that cover everything. When we look at something from Apple, there’s no doubt in our minds where it came from. Every piece of text, color, artwork, padding, page layout, everything, is accounted for. It’s deliberate.
- Contrast is about text background and foreground colors, and there key issues we are concerned about with contrast that important in the enterprise context, and for users generally too. A minimum level of contrast is required on page. Poor contrast means illegible pages and loss of productivity and maybe legal issues too. Remember that some users may be visually impaired because we have: An aging user population where their eyes are what they used to be. A legal requirement to provide accessible products. There must be a particular level of contrast for text to make it readable on the page. The full W3C (or Worldwide Web Consortium) accessibility guidelines covering this and other areas are included as a link at the end of this course. There are number of contrast tools developers can use just by searching on the Internet, using keywords such as “luminosity”, “contrast”, and “calculators”. The Juicy Studio tool, for example, uses the W3C accessibility algorithm to check for sufficient text contrast. Using the tool, developers type in a code for the foreground (always assumed to be text) and then a code for the background color. The tool reports if the developer has designed for correct contrast ratio, for example, 4.5:1, which is the minimum contrast ratio required for normal sized text for accessibility compliance. Contrast can even been seen at its starkest in Google Glass. Here’s an example, white on black. This is the best contrast combination. So remember, contrast and accessibility is important in all sorts of UIs in the enterprise.
- Finally, some resources for you. This presentation’s slides are also available if you wish to explore these links which will enable you to dive deeper into the areas we covered today or to help you present this topic to your own teams. I encourage you apply some of what you’ve learned and be deliberate and thoughtful in the visual design of your enterprise UIs and to see how users can be empowered through great-looking usability in work! Thank you.