Saturday Nov 16, 2013

Visual Design for Any Enterprise UI with ODTUG: UX Questions Answered

The Oracle Development Tools User Group (ODTUG) webinar on the Visual Design for any Enterprise UI was a great success with nearly 150 participants signed up. The Oracle Applications User Experience team is delivering a series of webinars through ODTUG on building great-looking, usable apps, and the visual design subject, along the one coming up on wireframing, is always a crowd puller. The visual design webinar is branding-centric, a fun subject, topical, and something we can all relate to, so it's a great way to learn how to make a great enterprise UI for your customers and clients. 

You can read more about the webinar content on the Usable Apps blog, but it is always fresh, this time updated to include insights on Facebook colors, the Yahoo! logo, those Apple iOS7 icons, and measuring usability and visual design. Applications user experience is all about being modern and compelling, and if it's hot in UX, and relevant to enterprise UX enablement, we're on it!

 title=

Oracle ADF 12c Data Visualization Sunburst Component

There was a lively question and answer session at the end of the webinar.  Athough the answer to any UX question that looks for a "yes" or "no" answer is, of course, "it depends" (hat tip: Jakob Nielsen), here's a sample:

Q: Should your designs always follow a color paradigm of a logo for say, some company?

A: Don't copy or steal, but inform yourself of branding and visual design best practices and then apply them to your enterprise UI's requirements. Adapt the best practices to communicate your key messages and to quickly "hook" the user. Before rollout, do some usability testing with representative users, and when you're live, measure the usability, and respond to feedback. Using smart coding techniques means you can make changes in a centralized, scalable way. A conservative approach is best. 

Q: Have you read the book by Edward Tufte on the visualization of quantitative information?

A: His book, The Visual Display of Quantitative Information is a great resource. Visualization of information is a vital UX requirement in the enterprise. You can find more information visualization guidance for free from the Oracle Applications UX team with the OBIEE Dashboard design patterns and guidelines and the Oracle Endeca UI Design Pattern Library. The Oracle ADF DVT components enable developers to be productive when building data visualization solutions.

Q: How does this (guidance) change for numeric data? For instance, can we apply these techniques to spreadsheets?

A: You can adapt these techniques for spreadsheets, yes. Lay out your information logically, use headings to organize and padding for readability, show the information in locale or common formats your users will understand, and don't overload the spreadsheet with lots of garish colors. A small number of primary colors, supported by a legend and made accessible, is best. Use readable, conservative font faces and allow users to change the viewing size if necessary. For faster access and breadth of information, consider graphs and charts visualizations with action components to then drill down into spreadsheets. Remember, Oracle ADF provides for the integration of Microsoft Excel workbooks and to detach and view application tables in Excel-like ways, too.

Q: If you are design phobic but your usability is good, should you hire?

A: If you must prioritize, then invest in a designer for icons (especially for mobile devices). Being smart with coding and leveraging technology to help you with color changes, font fallback solutions (using a centralized CSS) and so on, testing with common browsers, along with the other points covered in the webinar, make for development scale and productivity. However, as icons and graphics will most likely be binary files (let's not go there with SVG), bringing in designer expertise once-off is worth it. Remember, that its's usable websites that users consider beautiful - not the other way around - and well-designed iconography contributes to productivity and that all-important positive impression that users form rapidly. Icons are communication devices, central to your UX and the emotional engagement with your brand, so hiring a qualified artist is a wise investment to make if you can (investing in a copywriter is smart too).

Great questions! A copy of the presentation and the webinar recording is available to ODTUG members. You can ask your own questions by attending such webinars and engaging with our other outreach and events. Follow @usableapps on Twitter and the VOX blog for news of upcoming opportunities.

Wednesday Jul 10, 2013

Visual Design for Any Enterprise User Interface (Art School in a Box)

By Karen Scipi and Katy Massucco, Oracle Applications User Experience

"What color is Facebook?" Without thinking, you know it's blue. This isn’t by accident. So, what is the science behind visual design in enterprise user interfaces? 

Visual design is an essential part of the user experience. A well-designed user interface starts to become invisible to the user. It's naturally pleasing, and it doesn't create tension or roadblocks. It starts to feel like a comfortable shirt; you don't notice it. A poorly designed user interface feels like an ill-fitting shirt with a scratchy tag on the neck; you're going to notice it, and it's going to annoy you.

We've all seen visual designs that have made us cringe. And we've all seen visual designs that have made us feel good. Have you ever thought about what the differences are between these types of experiences, or why one resonates with you more than the other?

Any number of key elements affect visual design and users' responses to the design. We offer one that we consider key to users wanting to use an application or website that goes beyond usability and appeals to their emotional side: branding. Of course, you should also consider other aspects when designing a user interface for an enterprise application. All of these elements add up to helping "delight and excite" users, which results in productivity—for them and their businesses. 

Why branding? Because branding is the "hook." A well-considered brand gets noticed, so does consistency across a user interface. Branding is more than a logo. Branding represents the overall "personality" or impression of the design, and it is supported by these next few key design elements.

Color 

Color impacts the brain. A user draws conclusions from the ways that color is applied.  Color can work to your advantage if you understand how color works and is perceived by users. However, applying colors that violate this understanding can work to your disadvantage. For example, a color may have different meanings in different parts of the world. A good practice for controlling colors is applying a product coding strategy.

Examples of color usages

Examples of color usages

Contrast

Contrast is the difference between two adjacent colors. In our user interface designs, we consider these points:
  • Good contrast is central to the legibility of text. 
  • The highest contrast is black text on a white background, such as those used in books, newspapers, and dense online text.
  • Poor contrast can cause eye strain for users, even for those users with good vision.
  • Poor contrast can render a page illegible, especially for users with compromised vision.
  • Accessibility standards require a minimum level of contrast.

Examples of text on color contrasts

Examples of text on color contrasts

Layout

Layout focuses on how components and content are arranged on a page. A layout should optimize the natural way that content is read and scanned by a user. A page layout should consider and complement the reading order of a language (left-to-right or right-to-left). The content should be grouped and arranged logically and should establish relationships among objects that appear on that page.

Eye tracking enables user experience designers to determine where users' visual attention is focused. The data that we collect from our eye-tracking usability studies helps inform layout and other design aspects that we've proven might better accommodate users' natural reading tendencies.  

You might wonder why even small changes in layout and where you position components and content on a page are important. Changes can be interpreted as swimming upstream: you are fighting the natural order of things when you don't conform to established and proven practices, such as reading order. Even tiny spurts of lost user productivity can turn into death-by-a-thousand-cuts for an enterprise, as proven by Oracle Applications User Experience and industry science

Examples of left-to-right and right-to-left language reading order

Examples of left-to-right and right-to-left language reading order

Spacing

Spacing, such as white space and padding, is a powerful design element. When used deliberately, blank areas on a page can be used to break up the density of content on the page and to give the eye a place to rest or focus.

Examples that show how padding creates resting places for the eyes

Examples that show how padding creates resting places for the eyes

Font

Font choice reflects the personality of the site, for example, the brand. Conservative fonts, such as sans serif ones, are generally more easily read. Eclectic fonts, such as serif fonts or script, offer a trendier impression.

Font color and text styles also enhance (or not) the readability of the text, so they should be used deliberately. Consider that:
  • A color change within a block of text draws the eye to it and makes the user think that the text is different in some way, for example, a link, which is set in a different color from the text that surrounds it.
  • Bold text draws the eye to it and should be used to emphasize a word or a block of text. 
  • Italic text can be difficult to read online. It becomes either blurry or jagged, depending on the quality of the font and users' screens.

Examples of sans serif and serif fonts

Examples of sans serif and serif fonts

Icons

Icons are small images that powerfully impact comprehension. The eye is drawn immediately to an icon on a page rather than to a text button that contains the same information. When used, icons should differ enough in shape and color so that the user can identify the differences by simply scanning the page. 

The frequency of use should consider that the average user can process and understand a limited number of icons, their meanings, and their relationships among other icons—for example, status icons—at any one time. Our research yields that the average user can hold five icons in their thoughts at any one time. When the number of icons increases above five, our research yields that users' comprehension becomes compromised because there are simply too many meanings and relationships to consider and understand. 

Icons draw the eye to them, so they should be used judiciously. Too many icons on a page can add a lot of visual noise. When overused, users' eyes will bounce around the page from icon to icon. 

Devices

As we've moved into a more device-agnostic era, we've had to think about how to build enterprise applications for use across different devices. To control the overall visual design across devices and to ensure consistency and promote reuse across pages, we've centralized our style classes in a cascading style sheet (CSS). We also:
  • Use fallback fonts to control the appearance of the user interface if the device uses different system fonts. 
  • Test our CSS in different browsers and on different operating systems.
  • Avoid relying on images to colorize elements or add curves or gradients because they require manual image editing to revise.

The visual design aspect of any enterprise application can be quite complex. While we didn't cover every aspect of visual design in this blog entry, we hope you walk away with an understanding of what we consider the key element of visual design to be as well as its supporting visual elements for our enterprise applications. 

Interested in learning more? 

See:


About

Welcome to the Usable Apps blog.

Learn more about us at
Usable Apps

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today