Ghost in the Pixel

Finally…in developing digital products, there’s a range of often-forgotten elements that contribute to the total user experience and can negatively impact a user’s first time (or last time) encounter unless taken seriously from the very beginning. Make sure not to forget these vital pieces, so they’re not left at the last second or to some poor overworked engineer to jam on it at 2am before all-too-critical code freeze!

 

The initial “out of the box” experience
What’s the first time flow? What about the “next time” and thereafter? Consider licensing, activation, registration, and even un-install or deactivation as well (the final, end of app experience). How do they all relate? Make sure the login or sign-up process is simple and painless, preferably delightful, with a strong positive brand impression being made.

App preferences & settings
This should be simplified, largely smart-defaulted as much as possible. Never treat your prefs area as a toolshed, throwing a bunch of junk that doesn’t fit elsewhere. It should be well-curated just like a task menu or table list.

User accounts pages
Make sure users have a place to go to modify their accounts, update billing, change passwords, etc. and of course manage their privacy settings in an extremely intuitive, understandable manner that doesn’t require a law degree or IT schematic diagrams!

Error & warning messages
Don’t leave this to the very end or treat as an after-thought. It’s necessary to factor these into the overall design and product development process. Remember to make messages human readable, and meaningful with clear actions, preferably phrased in the affirmative (i.e., avoid double negatives, which confuse folks).

Section 508 compliancy
For physically challenged (sight, hearing, mobility) users. This is critical for government contracts in particular. Various agencies offer specialized consulting for 508 compliancy.

Internationalization
Maybe not a big issue for start-ups as much, but perhaps down the road as you grow and broaden your market reach, it’s good to spend some time considering your plan for supporting different languages and global markets. A good rule of thumb is to factor 30% more spacing for labels in forms.

 

Continuing with the primer series, this part covers some key fundamentals for shaping an effective user interface. Each should be carefully interpreted and absorbed (not just skimmed), to help achieve a solid foundation for good design in your product. Applied diligently (and repeatedly), they form the basis for a sound design practice and habit that will carry forth in subsequent revisions and related products/service offerings (i.e., mobile, web, etc.).

* Layout, structure, hierarchy, clutter, emphasis, fonts, colors, language…Yep it ALL MATTERS to good UI design. Below are some basic UI design principles to help:

* Having a good mental model (organization of elements) is critical. Should be simple, intuitive to understand. 

* If your user asks “how do I get back?” or “where is that page?”, just generally lost/confused, that’s a sign you have a poor mental model. 

* Structure is vital: navigational structure (taskflow), informational structure (menus and tabs), visual structure (layout of elements). 

* Grids provide the order, regularity, hierarchy, and stability for understanding a product UI layout. Respect and persist the grid! Don’t just randomly put stuff in places that “look nice”. Be sensible and logical.

* Use contrast and whitespace to create visual emphasis. There should always be a single clear emphasis of what’s most important. Limit the number of emphasized elements otherwise everything is shouting.

* Cluttering a screen with every possible piece of data only creates confusion, hurting the priority of content and overall legibility.

* When it comes to fonts, start simple: Start with just 3 fonts and limit the overall number. A font is any variation of weight, style, color, typeface. 

* Ditto for colors, start simple: Pick a color system that serves the need of the product at a functional level. Start with a base color, up to 3 compliments, 1 highlight color and black and white (yes, white is a color too! it’s not “nothing”)

* Reduce complexity: Remove all extraneous lines and ornamentation. Check for repeated words and symbols that can be consolidated. Pick a primary way to perform an action and do it well. Do you really need all those buttons, dropdowns and sliders? 

* Language is vital: Avoid marketing labels in the UI. Just call things what they are to the user in their language. Always use industry standard language when possible for specific domains, like bio-tech or financials. Be consistent with terminology! Especially across platforms and devices. 

*All UI actions require visual feedback. Make sure there are visual cues as to what is draggable, clickable, etc. If the UI lags in response to a user’s action, it will be perceived poorly by the user. Performance matters to good design!

* Being consistent for the sake of consistency is unwise. Cohesiveness and being sensitive to the context, purpose, goal of user’s task…that’s far more important.

* After doing all this…seek out moments of delight, something fun, positive, surprising to make your product more desirable. Clever uses of animation, sounds, graphics, casual language are all examples. 

* Ultimately you want to be sure your product instills a sense of trust (confidence and reliability), desire (emotional bonding), and integrity (authentic, cohesive, fully formed all the way).

I’ve recently had the great opportunity to present to a small group of startups being incubated within our Citrix Startup Accelerator division regarding good design practices, and partnership with designers towards product excellence. As part of that presentation, and in subsequence follow-ups, I’ve created a “primer” collecting useful pointers, references, links, and articles into a single document for startups to use. Nothing secret, and certainly suitable for a broader audience. I’m happy to share that here below. I may evolve this into a more full-scale presentation for various conferences at some point too. Enjoy!

Overall Design Process

Discovery > Conceptual Design > Detailed Design > Implementation > Post Ship
(all the while doing research, user studies, testing, etc.)

More about “design process” in a couple prior posts:

https://www.ghostinthepixel.com/?p=78

https://www.ghostinthepixel.com/?p=71

 

Suggested Design Principles

Provide smooth and direct interactions
Use smart defaults where sensible 
Help the user complete tasks efficiently

Present information clearly
Group and prioritize data logically
Show only what’s important
Enable successful decision-making

Performance matters
Set proper expectations
Respond quickly to user inputs
Acknowledge delays with grace and humility

Be modern
Embrace emerging UI trends
Leverage what’s popular and familiar
Design for the user, not just a feature

Respect your users
Minimize interruptions
Speak their language and be honest
Anticipate their needs and protect them from harm

 

Question Your Interface…

For every UI item (button, icon, field, etc.) ask: What problem does this solve, how does this support the user’s goal?

Is adding another feature or UI item helping or hurting users from achieving their goals…and supporting your value prop?

Every additional UI element is yet another visual signal that has to be viewed, learned, understood, and tried out, thus increasing complexity.

How much complexity do you truly need in your product? How much of that complexity can be pushed to the back, “behind-the-curtain”?

Keep referring back to your UX value prop statement to help with your UI design decision-making!

 

Know Thy User!

What is your product’s value prop? What’s the core benefit for the user?

Who is your target user and what are their a) current pain points and b) unmet needs? Can you verbally paint a picture of their “day in the life” and how your product fits in it? What’s the story?

What is your user’s primary 80% tasks, activities, and goals? How does your product enable those goals? Focus on the 80%, not edge cases!

What contexts and scenarios would your product be used in? At home, in a coffee shop, on a plane, at the office, etc.?  Focus on the 80%, not edge cases!

Is it for a mobile device or stationary situation (desktop PC, etc.). Are there multiple screens and devices involved?  Focus on the 80%, not edge cases!

What is the emotional outcome you seek? How do you imagine the user feeling after using your product? Again, connect this back to their tasks, activities, goals, and contexts of usage.  Focus on the 80%, not edge cases!

Complete this sentence: User X needs Product Y to achieve Goal Z for W reason/purpose. That’s your UX value prop in a nutshell. This requires a deep understanding of your user’s context and goals.

Related Resources
Basic Discovery Questions for Scenarios
Basic Discovery Questions for User Profiles
Basic Discovery Questions for Functionality

 

Useful Design Articles

Designer Founders

Design Primer for Engineers

How Designers and Engineers Can Play Well

IDEO Human Centered Design Toolkit

Steve Jobs’ 6 Pillars of Design

 

Additional Pointers

Dieter Rams’ 10 Principles for Good Design

Jakob Nielsen’s 10 Heuristics for User Interface Design

AskTog’s First Principles of Interaction Design

Carsonified’s 10 User Interface Fundamentals

Fred Beecher’s Nine Essential Characteristics of Good UX Designers

Keith Lang’s Top 10 UX Myths

Below is an excerpt from a recent piece I’d published for an IT industry journal, offering “predictions” for 2012 around design matters. It was a fun piece to write, in cooperation with our Citrix PR team. I usually avoid publicizing any kind of  “predictions” (you almost always get in trouble, either for inaccuracy or overhyping) but took this cool opportunity to frame a case for certain UX trends and themes. Enjoy!

 

 

2012 will certainly see further market growth and technical evolution of enterprise virtualization technologies, along with competing cloud platforms for public/private data access. From a user experience (UX) perspective, however, certain drivers are starting to become apparent as “consumerization”emerges as a common theme amongst enterprise software vendors–thanks to the skyrocketing popularity of iPhones, iPads, and “Apps”.

 

1. Ubiquity of content: Partly due to virtualization & cloud tech, we can now access any content from any device, any place. We will live in increasingly “blended” modes of work AND play, from updating your Facebook status (discreetly) at the office, to revising spreadsheets while in line at Starbucks for your Venti latte. Indeed, it has become an entitled expectation to be able to do so among Gen Y & millenials entering the workforce.

 

2. Fluidity of information: Much like the NFL Mobile Network commercial where a football fan enjoys the exact same game across morphing devices (from TV > phone > tablet > laptop > etc.) that information remains the same and “mutates” according to each device’s particular form factor and screen size or capabilities. Yet all the while it’s one constant uninterrupted flow, optimized for the context and device with device-based and network-based intelligence (bandwidth enhancements, off or on-loading resources, etc.). All of that is done invisibly so the consumer has no idea, nor should they.

 

3. Personality of service: As Robert Brunner of Do You Matter, a good book on creating cultures of design savviness, has explained: People  simply love their chosen brands, which matter even more so in highly contested, fragmented technology spaces. People LOVE Dropbox, Netflix, Evernote, and so forth…and will react harshly when things change for the worse (See: Qwikster). Asking for patience during downtimes or flaky service just doesn’t cut it anymore. So while IT admins roll out new cloud-driven IT systems, the service impact will reflect their brand and shape their users’ (and employees’) perceptions. Tone of voice, personality, and value of service all add up. You gotta have emotional connectivity, not just IT data connectivity. People have to WANT to use your service to positively fold into their daily lifestyles of work and play…and feel good about sharing that with their friends and family (the viral, social effect).

 

In the end, 2012 will be the year of emotionally resonant simplicity that blends with people’s lifestyles, not just their devices or apps but tapping into their needs for have ubiquitous, fluid, beautiful experiences across virtualized and cloud-based platforms. We’ll see this emerge in Home Entertainment (Cloud-based TV that “help” your choices), Home Automation (Cloud-driven thermostats that “know” your energy usage), and Wearable Computing (Smart health monitors, like Jawbone Up, FitBits, Nike Fuel, to support wellness habits) even In-Car Telematics (Cloud / Virtualized systems for a car to run entertainment, navigation, etc.). The possibilities are truly endless, but the choices will be determined by total quality of UX.

I remarked the other day to one of our design directors how often it seems my “throwaway” diagrams of an overall workflow (objects / people / actions / outcomes) spark some very critical (yet unaired) business discussions: what are we really making, which market does this serve, what’s the monetizing scheme, and overall profit model? Indeed, I find that’s one of the very valuable, even influential, aspects of being a UI designer for a product team…not just creating spiffy comps and cool prototypes with nicely annotated specs, but raising those basic questions with simple diagrams.

It’s the subtle insinuation of deep purposeful forethought to help make powerful stakeholders sit up for a moment and reflect upon the true collective aims of this project…an effort absorbing such sizable time and expense. And they don’t have to be slick gorgeously rendered diagrams either…just basic pen/whiteboard style or “back of the napkin” sketches, abstractly representing relationships of parts and wholes, action pathways, preceding and dependent elements, causality and outcomes. Loose gestural diagramming is often best, with the crudeness implying the ideas are still formative stages of early iteration and suitable for adjustment.

Such quick rough diagrams have a certain rawness and energy that perhaps gets business execs & stakeholders thinking at a level more primal than slick Powerpoint decks and Illustrator posters. But for whatever reason, these diagrams can serve as valuable doorways to critical conversations about what’s the core business problem we’re trying to tackle, not just the UI we’re trying to ship. And, perhaps more importantly, it will get those execs, even the CEO, to diagram out their thinking of what matters most to this project, and to the company mission. That’s how design can really help the business, beyond a cool deliverable, towards elegant simplified thinking.