In an economy where the average company finds it tough to not only grow but also sustain, it is worth considering how these brands have observed meteoric rise just within decades.

Besides good business sense and the funding to support expansion, it can be argued that all these brands had a strong focus on localization. For instance, Uber offers localization of services – UberCOPTER in the French Riviera, UberBOAT in Istanbul, and UberAUTO in India. It also launched UberENGLISH, a service designed to book drivers with English language familiarity in non-English speaking nations. Netflix offers localization of content – an extensive library of regional and country-specific content and high-quality dubbed versions and subtitles for international audiences. Airbnb realized early on that log-in preferences vary by region; today, it supports log-in via Google account, Facebook account, and email in the United States, while it provides Weibo and WeChat log-in in China. Yet, their localization strategies go deeper, reflecting a deep cultural understanding and sensitivity across their messaging, branding, and even advertisements.

Such localization that addresses the unique preferences of regional users is perhaps the ultimate hallmark of a global brand.

Why Should You Design for Different Cultures?

The way that certain messages, colors, and images are perceived by a cultural group may differ from the perceptions of another. So, as a brand, how you are viewed in a community will depend on your understanding of their culture and how you mold your messaging to be culture-specific. Communities can also demonstrate unique preferences for both tangible and intangible elements of design that are specific to their socio-cultural and religious identities, histories, and even political leanings. Many of these preferences may exist at a subconscious level, often as a product of unique mental models, decision-making processes, education, or even technological competence. Only by understanding cultures and the way they influence mental programming can brands create a relationship of trust and successfully compete against indigenous brands.

Brands that did not understand or failed to adapt to local preferences have historically struggled to sustain. For instance, eBay, which saw enormous success in the US – struggled to get a foothold in the Chinese market. It is suggested that eBay may have failed to support swift guanxi among Chinese users through instant messaging or other technologies, therefore preventing buyers from interacting with sellers. Such buyer-seller interactions, which are considered crucial for making purchasing decisions, were never encouraged, therefore leading to an erosion of trust.

When Should You Adapt Your Designs for Different Cultures?

Not every business needs to adapt its products for a cross-cultural audience. You may have limited cultural disparity between your target and local audiences, in which case, you do not require cross-cultural adaptation. Or, there may exist cultural differences, but these may not be large enough to warrant localization. In this case, you may offer language options in the product interface and website or provide instruction/product manuals in different languages.

For example, the Maybelline website for South Korea has similar visuals and products to its US counterpart but offers translation in Korean.

If, however, one (or more) of these target groups are a sizeable percentage of your overall audience, you need to offer a localized, culturally-specific product(s) and interface(s). It means that you should translate your content, change currencies, offer preferred sign-in methods, and adapt visuals and metaphors so that the product feels locally produced.

For instance, the IKEA websites for Turkey and South Korea differ in their product showcase, languages, and imageries.

Understanding Cross-Cultural Differences

To adapt your designs for a cultural group, you must first understand the cultural differences between your local and target audience. Understanding these differences would help you to determine to what degree your designs require adaptation.

Here are a few models that underline the differences among cultures.

1. Hofstede’s Cultural-Dimensions Theory

Perhaps one of the most comprehensive frameworks for assessing cultural differences was proposed by Dutch social psychologist Geert Hofstede. This framework defines six dimensions that outline a culture’s mental programming.

• Power distance index: The index quantifies how social inequality is perceived and accepted by those on the lower end of a power spectrum. According to Hofstede, high power distance cultures accept hierarchical orders and authority whereas, low power distance cultures strive to equalize power imbalances and accept authority based on true expertise.
• Individualism vs. Collectivism: This dimension reflects the degree to which a society thinks from an “I” or “we” mentality. Individualist cultures are loosely-knit groups where individuals act in their interests and make their own decisions. In contrast, collectivist cultures are tight-knit groups that act in the interests of the collective and make decisions based on the opinions of others.
• Masculinity vs. Femininity: Masculine societies tend to demonstrate a preference for achievement, material success, and assertiveness. Alternatively, feminine cultures prioritize cooperation and collaboration, avoids conflict, and prefer a high quality of life.
• Uncertainty Avoidance: This dimension reflects the degree to which a society accepts new ideas or unorthodox behavior. Cultures with high uncertainty avoidance are resistant to change and prefer familiarity over unfamiliarity and practice over principles. Whereas in cultures with low uncertainty avoidance, individuals take more risks and are more willing to try something new.
• Long-term vs. Short-term Normative Orientation: This dimension measures the ease with which societies adopt change. Cultures with long-term orientation are pragmatic in their approach. They believe that traditions can be adapted as per context and time, and they take decisions for the long term. On the other hand, short-term orientation cultures live in the present, maintain social codes and traditions, and do not worry about the future.
• Indulgence vs. Restraint: This dimension measures the degree to which individuals curb their impulses and wants. While indulgent cultures are more willing to accept the uninhibited satisfaction of human needs, restrained cultures set diktats that prohibit the gratification of needs.

To see how different cultures differ on the six dimensions, you can use the country comparison tool. A comparison between the two nations – Austria and Vietnam – on Hofstede’s scale is shown below.

If your domestic audience is based in Austria, and you want to provide localized content for the target audience in Vietnam, then, based on Hofstede’s model of cultural dimensions, you must adapt your interface for higher power distance, collectivism, femininity, low uncertainty avoidance, and restraint. The reverse is true if your domestic audience is based in Vietnam.

2. Hall’s Cultural Context Model

Proposed by the American anthropologist Edward T. Hall, the cultural context model examines the relative importance of context in communication for different cultural groups. Low context cultures prefer information that is direct, explicit, and without ambiguity. This is because such cultures are more individualistic, and there is little expectation to understand each other’s histories and experiences. In contrast, high context cultures are collectivist societies with a preference for community harmony over individual achievement. In such cultures, communication is more subtle and context-driven, and emphasis is placed on the understanding of non-verbal relational cues.

While there are several other models for understanding cultural differences, it is important to understand that cultural models only suggest areas of inquiry to understand the current differences among populations. Cultural characteristics are fluid, and therefore the observations made in the past will hardly be relevant to modern audiences. So, instead of making stereotypical conclusions based on primitive observations, it is advisable to engage in active user profiling and research.

Adapting Designs Based on Cultural Differences

Assuming that the understanding of cultural differences is current and based on research, it is now possible to adapt designs based on an understanding of how communication, colors, symbols, and designs will be perceived by the target audience. To do this, we will compare two university websites, one from Austria and the other from Vietnam, and observe how cultural differences are manifest through design.

1. High Power Distance vs. Low Power Distance

For high power distance cultures, interfaces should be designed for easy navigation and quick information access. Applying religious and nationalistic themes, demonstrating expertise, and using figures of social or national importance can help engage such audiences.

For instance, on the official website for Vietnam National University, the university ranking in the World University Rankings is given precedence over everything else. It is aimed to relay a sense of authority and earn the visitor’s trust.

For low power distance cultures, informal organizational structures with visual elements that are universal or of popular appeal are favored. Communication must be informal but direct. For example, on the official website for the University of Vienna, the images show students and their stories upfront, rather than relying on reputation or University rankings. It is noteworthy that Vietnam has a power distance of 70 against Austria’s 11 on Hofstede’s scale.

2. Individualism vs. Collectivism

When designing for individualistic cultures, information on how the product or service benefits individuals or helps them succeed must be delivered. Themes signifying achievement, youth, vitality, and materialism can be utilized.

The University of Vienna site has a dedicated blog called “Humans of University of Vienna,” focused on student stories and achievements. Almost all these stories focus on the individual rather than the team.

For collectivist societies, information that reflects how the product or service benefits the cultural group must be delivered. Themes surrounding community harmony and peace and visuals focused on history and tradition work well with such audiences. It is best to provide feedback elements, such as social media sharing options, reviews, or “popular” categories, to help them with their decision-making.

There is a strong focus on team achievements throughout the website for Vietnam National University, as shown in the image below.

3. Masculinity vs. Femininity

Interface designs for masculine societies should be of high functionality, allowing exploration and easy control while driving the quick realization of goals. The content must make a clear distinction between age groups and genders. Incentives and reward systems can be employed to grab interest.

Austria scores higher on the masculinity index than Vietnam. Note how the University content is categorized so that visitors get what they are looking for without exploring the whole website.

Interfaces designed for feminine cultures need to be engaging, offer positive experiences through visual aesthetics, and support collaboration and exchange of ideas. It is vital that such interfaces are gender-neutral and designed to suggest a blurring of gender roles.

The Vietnam National University website allows visitors to leave comments and feedback across different pages, as in the image below. This was not observed for the University of Vienna website.

4. High Uncertainty Avoidance vs. Low Uncertainty Avoidance

Interfaces aimed at high uncertainty avoidant cultures must look official and professional. They must offer simple navigation, prevent users from getting lost, and avoid user errors. Such interfaces must provide limited menu options and provide information in a simple structured way without ambiguity. Content must be language and culture-specific to drive familiarity, while visuals and colors that reinforce the messaging must be applied.

Austria scores higher on uncertainty avoidance compared to Vietnam. The Austrian website offers an organized footer with helpful links and a sitemap to prevent visitors from getting lost. On clicking, the different sections are further segregated to provide visitors with the information they seek.

Interfaces for low uncertainty avoidant audiences may be complex, offer several menu options, and support exploration. Designs and visuals may be more cutting-edge, and images and colors that drive meaning and interpretation may be applied.

The footer in the Vietnam National University website provides the main categories. The information in each section is less organized than in the University of Vienna example.

5. Long-Term vs. Short-Term Orientation

The interface for an audience with long-term orientation must support the presentation of relevant and detailed information with clear benefits and in a way that is convincing but unhurried. Content and visuals must serve the information sought. UI elements, such as wishlists and social media sharing options must be provided so that users can revisit the site.

For short-term orientation cultures, design the UX for a quick achievement of goals. Use shortcuts and clear CTAs to take immediate action. Avoid complex navigation and browsing and provide only relevant and useful images and links.

Austria and Vietnam are almost similar in their normative orientation scale. Both host prominent social media sharing options. The University of Vienna website also contains quick links and supports quick browsing, as evident in the earlier examples.

6. Indulgence vs. Restraint

When designing for an indulgent audience, you must offer more options and categories to choose from and purchase. Showing related items and offers and providing freebies are other ways to cater to such an audience.

The images and content in the “Life at Uni” and “Humans of University of Vienna” convey a sense of casualness and fun that signify the autonomy of students.

For a restrained audience, it is advisable to limit the number of options and show ways to save money through discounts. Further, information on corporate social responsibility helps to engage such audiences.

Images and the tone and presentation of content on the Vietnam National University website conveyed seriousness and reserve. There was limited focus on the inner lives of students on campus.

7. High-Context vs. Low-Context

Interfaces for high-context cultures may have complex architectures with multiple sidebars and menus that encourage exploration. Heavy use of images and banners is also typical of such interfaces. Images that elicit emotions or highlight collectivist principles, such as featuring the use of products by other individuals, are used. Communication is polite and more nuanced.

Since Vietnam scores higher than Austria in collectivism, we can assume that Vietnam is a high-context culture. The news page on the Vietnam National University website is prolific with images and banners. There is also an emphasis on social activities, community building, scholarships, and trade union news.

The principles of individualistic cultures guide the design of low-context culture interfaces. Navigation is simple with limited menu and sidebar options, and images and links are fewer. Communication is explicit and precise, and images that signify personal accomplishment are used.

Since Austria scores high on individualism relative to Vietnam, it should have a low-context culture. The news page for the University of Vienna website is far simpler than the Vietnamese website, with fewer banners, images, and categories. There is a greater focus on scientific content than community news.

Understanding Limitations

While cultural models provide a framework for understanding cultures and making design adaptations, these are largely inadequate in addressing the cultural nuances of individuals and subgroups. This is because the boundaries of culture are impossible to confine within geographical or national borders. Many cultures and subcultures may exist in the same region with marked differences making such models reflective of averages at best—further, culture changes with time and over generations. The impact of factors outside the individual and the community, such as education, the use of technology, the political and legal frameworks, or interaction with other cultural groups, are also important parameters that would define the relationship of your target audience with technology or their perception of usability.

However, these models can offer psychological insights to inform the design process. The ideal strategy, therefore, is to apply the understanding of cultural differences as broad principles but drive cross-cultural UX with a true understanding of cultures derived through in-depth research and cultural immersion.

The Essential Design Elements That You Must Get Right

Charles Eames said,

“The details are not the details. They make the design.”

Nowhere is this truer than in cross-cultural design, for true localization lies in the details.

There are certain elements of design that you must nail to get localization right.

1. You must get geopolitical details right, especially when using maps with disputed territories. In many religions, certain foods may be prohibited at specific times or around the year, while in others, norms around dressing may exist. The messaging and imageries used must be sensitive to all such cultural, religious, social, or geopolitical sentiments.
2. Different cultures interpret colors differently and the significance associated with colors in one culture may differ significantly from another. To ensure effective localization, ensure that you adapt colors to suit the cultural sensibilities of your target audience.
3. Like colors, symbols are also subject to culture-specific interpretations. When adapting your design for a cross-cultural audience, ensure that the symbols used are familiar and drives the right meaning.
4. On translation, text lengths may change. To ensure minimal changes to the UI after translation, ensure ample padding for your design elements. Further, languages can have both horizontal and vertical alignment. While most languages with horizontal alignment read from left to right, others like Arabic and Persian read from right to left. For all such orientations, the correct placement of text, images, and CTAs should be ensured.
5. Sometimes perfection lies in the detail. For instance, when designing a form, allow users the flexibility to insert special characters, or a wider space to type a longer name. You should also be mindful of the different formats for date and phone numbers, the metric systems used, and currency and conversions.

The Takeaway

In today’s globalized world, for a business to make its presence felt outside the home turf, it must form a relationship of trust with its audience. Design can be a powerful tool to build this trust, but it must be guided by an understanding of the audience and their cultural identities. Cultural models help suggest the mental maps of the target cultural group based on an analysis of cultural differences. However, culture models must only be used as principles to guide audience research, for it takes much more to design nuanced and inclusive UX that is not only respectful and empathetic but also usable. The latter can only be achieved with in-depth UX research and cultural immersion.

The post Cross-Cultural Design: Designing for Global Audiences appeared first on UX Mastery.

Creating a smooth and frictionless experience that requires little effort to get things done is the key to success for apps and online platforms. In shaping this UX design, even small and often overlooked design attributes matter a lot. The little animation that shows when something is loading or the small icons to express your reactions to content or similar interactive elements can be small. Still, together, they make a massive impact on the user experience (UX) design.

When you develop your website from scratch, you need to focus on every tiny detail to ensure ease of use and smooth user interactions. Microinteractions are one of the small but highly impactful design decisions. 

Let us see how micro-interactions work and how they can optimise the UX design. 

What Are Microinteractions?

Small design elements that improve user experience with natural interactions are called microinteractions. The “likes” and reaction symbols we tap on to express our emotion for content is the perfect example of a microinteraction. The little fingerprint button that appears on the screen to put your thumb on is another example. 

These small interactive design elements help connect the user interface with the user experience of a website or app. They can be found everywhere, constantly delivering meaningful gestures and interactive ways to help users engage with a digital platform. 

Why Is Optimising Microinteractions So Important?

When an increasing number of business brands are trying to establish strong connections with their customers, these small design elements in an interactive manner can positively improve their experience and help them feel at ease. 

They are so subtle and non-descript in appearance that users are often not able to recall them particularly. But they work like small bridges to make transitions from one screen to the other smooth and seamless. Today’s digital space is unthinkable without these microinteractions. 

No wonder every app or website now focuses on effective ways to improve and enhance microinteractions for delivering a superior user experience. Yes, the dull buttons and screen animation referring to specific actions can be enhanced to make users feel more at ease, most often without their knowledge.

Some of the key benefits of improving microinteractions are:

• Helping users engage with a product in a more intuitive and frictionless manner.
• Providing users instant feedback corresponding to all the actions undertaken by them.
• Improving user engagement through delight.
• Providing users more sense of control and autonomy. 
• Offering a detailed visualisation of background operations to help them take corrective actions. 

How Is Microinteraction Constructed? What Are the Key Parts? 

Microinteractions consist of four different parts as Triggers, Rules, Feedback and Loops and Modes.

• Triggers are the particular contexts for initiating a microinteraction. Now they can be initiated by the users or the systems. By detecting certain contextual clues, users can initiate an action, or the system can decide to initiate an action based on a set of qualifications. 
• The Rules determine the things that take place following the triggering of microinteraction.
• Feedback is the part to allow people to get an idea of what’s happening in the background of a microinteraction. All the on-screen visuals or sounds that make users know about the undergoing microinteraction is called feedback.
• Loops and Modes are the conditional rules that determine how microinteractions will work in a changed condition. 

Most Time-Tested Principles to Make Use of Microinteractions

Over the years, microinteractions are have been utilised by digital apps for helping users experience a smooth transition from one activity to the other. These small design elements over time evolved and accommodated more effective ways to engage users. Some principles of microinteraction design stood out as most effective. Let’s have a look at them. 

Prioritising User Satisfaction 

The principal aim of any design is to put users at ease and make them easily engaged. The same principle should be followed for microinteraction design as well. It is not just the smart look and feel that matters, the more important is how the microinteraction ensures enhanced ease of use. This is why it is essential to put every microinteraction under A/B testing. 

Design It Simple

Microinteractions are subtle, and they don’t attract user attention. They remain inconspicuous while subtly enhancing the ease of use for the audience. This is why you should design them simple and do away with all complications.

Let It Not Distract Attention From the Content

Just as good typefaces enhance our readability while not grabbing any particular attention to the font type and size, microinteractions in UX design help users with optimum ease of use while not driving any attention to these interactive design elements. Any microinteraction that distracts user attention from the content undermines this principle.

Give Utmost Priority to Relevance

Any microinteraction which is not fully functional is not necessary. Just ask yourself how much relevant the microinteraction is for optimising the ease of use. Don’t incorporate microinteractions just for the sake of design. Microinteractions are functional design elements and not ornamental ones. 

Balance Familiarity and Innovation

Since most users are familiar with different microinteractions, you can easily achieve the desired results by incorporating them into your app. But there is still room for innovative ways to tweak such interactions and make users feel delighted with them.

The way Twitter uses microinteractions is an excellent example of innovative tweaks in microinteractions. But in all circumstances, you need to keep your focus fixed on optimising the ease of use more than anything else.

Testing Small Animations

Despite appearing small, subtle and insignificant, microinteractions have a far-reaching impact on any digital interface. If you incorporate a new microinteraction in your web interface, it can instantly impact the user experience. Sometimes, new microinteractions can only add to the confusion of your audience.

As with every design decision, test these small design elements. Test the small animations and make sure they give users the right feel as you have intended. Create a prototype of the microinteraction and test them thoroughly to ensure effective output. Remember, the users will not comment on these small animations; they only enhance the overall ease of use.

Microinteractions Should Be Devoid of Cognitive Load

Microinteractions focus on a single and particular action or a specific task, and they use just one animated character to create the visual feedback. So, additional graphic elements and more animated characters will only cause unnecessary cognitive load and distractions, negatively affecting the effectiveness of the microinteraction.

To get clear of the cognitive load, follow the UI design principle consistently across microinteractions as well. Do not allow the microinteraction to stand apart from the overall design aesthetics and flow. To help users actively with something beneficial and relevant, you can incorporate small animated tooltips providing visual clues on completing specific tasks.

Conclusion 

Employ microinteractions judiciously to enhance the user’s experience. Microinteractions can evolve further to incorporate new design elements, but they cannot do away with the grounding principle of prioritising ease of use.

Image Credits

Hero image created with the help of the fine folks contributing at the Noun Project under the Creative Commons License: BomSymbols, Valeriy and Knockout Prezo.

The post Key Principles for Creating Microinteractions for High-fidelity UX design appeared first on UX Mastery.

It is part of our series of community member reviews critiquing UX books. Read some of our other reviews or see the full list of recommended books.

The Book 

Title: Figure it Out: Getting from Information to Understanding
Authors: Stephen P. Anderson & Karl Fast
Publisher: Two Waves Books (An imprint of Rosenfeld Media)
Price at time of review: Paperback + Ebook bundle USD$32.00; Ebook only USD$13.00 (prices from Rosenfeld Media website)

Book Summary

In this book, Anderson & Fast remind us that information is only understandable in relation to people and their needs. They follow that we must strive to make information understandable, perhaps involving testing “with the intended audience”, evaluating the understandability, and iterating “until it reaches an acceptable level of understanding” (p.13). In the introduction they explicitly pose the question; how might we help others make sense of confusing information?

Based on this, I was expecting a ‘how to’ book to help us present information in a way that aids understanding — to help designers do the heavy lifting of sense-making, and to provide users with understanding and not just information. 

This would have been useful given the wide range of industries that need to make information understandable in our modern world — from creators of content to anyone writing a complex privacy policy or ToS agreement. Communicating complex information that needs to be understood by the masses is always important, but especially now amongst the current COVID-19 pandemic. The authors themselves remind us that we, as consumers of information, should expect more — especially when it is coming from experts and professionals. State health and public safety information should be unambiguous. 

Instead, Anderson & Fast’s ‘Figure it Out’ is a book about the ways in which we think and how humans understand information. This isn’t to say that I didn’t enjoy it, or that it isn’t a useful book. It is a theory-heavy look at perception that is perhaps suited to more junior (or trained on the job) UX and UI designers who want to learn how users understand and perceive. I make this distinction because any designer coming from a psychology- or Human-Computer Interaction– (HCI) focused background will likely already have a grasp of these concepts. Still, it is a helpful refresher to inspire new ideas in even seasoned designers. 

Structure

The book is broken in 6 parts with a total of 15 Chapters; 

Part 1 focuses on where cognition happens. Parts 2 through 4 focus on how we understand – through associations, external representations and interactions. Then, part 5 describes systems of understanding in small and large groups, and part 6 looks at current, and possible future, tools that help us understand information. 

Key Takeaways 

From this book, you’ll learn about the ways we humans think and how we understand. 

There are several different ways that we ‘make knowledge’, and these are often intertwined. Information is a resource, not a finished product, and needs to be transformed to aid understanding. I’ve summarised the book in 5 key takeaways and represented them in a sketch note. 

1. Information does not equal understanding

For complex situations where there aren’t simple answers, Anderson & Fast remind us that understanding requires more than just access to information. We are only doing half of our job when we put the onus back on the user to make sense of information.

We are only doing half of our job when we put the onus back on the user to make sense of information.  

2. Knowledge is influenced by prior associations

Prior associations impact how individuals interpret information, and these interpretations differ between people. Anderson & Fast explain that we ‘know’ things based on associations activated in our minds; we make sense of new information by linking it to a familiar concept. 

Prior associations also come from narratives; we learn through stories (including fictional ones) and transfer meaning from them when we come across new information. In Chapter 3, the authors take a “short dystopian journey” (p.50) to a future where we have “permanent, updatable implants” in our brains that allow corporations and governments to “peer into our minds and access our most intimate thoughts”. The use of implants is the focus of my own PhD dissertation, and a large part of the misperceptions and fear that surround the topic are based on fictional claims such as these. Given the book emphasises how we use stories to make associations and learn, I think it is pertinent to remind a reader that this is a speculative future.

We also understand by identifying patterns; our minds are good at seeing patterns which are influenced by prior associations. What we see is based on what we already know. Meaning comes from associations whether they are intended or not. 

The lesson that designers can take away from Anderson & Fast’s explanation of how associations influence thinking is that we need to carefully choose frames, words and visuals to ensure we are not invoking the wrong association that could result in misperception. 

We need to carefully choose frames, words and visuals to ensure we are not invoking the wrong association that could result in misperception. 

3. Knowledge influences external representations

We create external representations as a way to extend our thinking into the world using tools, models, drawings and more. This is an integral part of sense-making, not just a means of presenting information. 

The authors explain how representations help create meaning by extending our thinking into the external environment. Visual representations make abstract ideas concrete by holding information. The way that information is arranged in space aids memory and recall, influences understanding, and conveys meaning. The arrangement (grouping, sequencing, ordering etc.) exposes abstract relationships between information. Presenting the same exact information in different ways (called isomorphic representation) can provide different perspectives in understanding and interpreting information. 

4. Understanding is not simply ‘brain bound’

Thinking is not just confined to the brain – it’s spread across the body and the world. We extend our minds, and memory, by offsetting information into the external world. Our ability to understand is limited when we have to do all of the work in our heads. 

Anderson & Fast explain that by representing information outside of our minds we can manipulate the information – allowing for new meaning to be created. Doing the thinking in the world rather than in our heads can be faster and more accurate. Furthermore, bringing thinking into the physical (or digital) world can be easier than imagining inside our heads. Another reason this is easier is because not everyone has the ability to do mental visualisation. 

Doing the thinking ‘in the world‘ rather than ‘in our heads’ can be faster and more accurate.

5. Information is a resource to be interacted with

Anderson & Fast describe interaction as a part of the thinking process, not just a way to view information. It’s necessary to create understanding because interaction helps us see things in a new light. We make meaning by doing. When we manipulate information (physically or digitally) we make new connections which change our perception, therefore allowing us to see new meaning. It’s like how arranging scrabble tiles helps us see more potential combinations than with thinking alone.

Information itself is like pieces of a puzzle. It needs to be transformed, (the pieces put together) so we can understand what it means. We synthesise and transform information so that we can understand it. This book will teach you a myriad of ways that we think; by sorting, chunking, annotating and a myriad of other ways you will learn in this book. Specifically, Anderson & Fast teach readers 15 interactions used to understand information (grouped into 4 themes: foraging, turning, externalising and construction). 

For designers, this means we should arrange information as an external representation in order to support perception and create understanding. We should also consider how we can allow users to perform these manipulations themselves to create understanding. 

The Review

The good 

• This book is educational. If you have your expectations set correctly up front (that it is not a ‘how-to’ guide) this book can give you new perspectives to bring to your work.
  
• It covers a breadth of topics. The book goes wide with the theory, covering many aspects with one book – from cognition to Gestalt principles. 

• There’s still a lot of ‘figuring out’ to do yourself, but the examples throughout the book will likely spur your own thinking in how you can apply these concepts to your own work.

The ‘it depends’ 

• It’s theory informed. This can be both good and bad depending on your personal preference. Personally, I’m a big geek so I liked this. It may help you understand the why behind some things you are already doing as a designer and help you explain the theory to the business to get buy in.
  
• It’s cognitive science heavy. Similarly, this could be good or bad depending on your personal preferences (for me, it’s good). The authors spend a considerable amount of time explaining theories of mind, but then tell us that how the mind really works doesn’t matter for our purpose – and then go back to exploring cognition and where thinking happens. Confusing? 

The bad 

• Some of the theory feels repetitive. If you have read Daniel Kahneman’s ‘Thinking Fast and Slow’ any time in recent memory, many of the examples around perception and biases will be familiar and feel repetitive to you.
  
• The authors are good at pointing out that some examples are for Western cultures, but for other examples accessibility and diversity appears to be an afterthought. Vision is mentioned as powerful and important with little attention paid to blind or low vision individuals (although colour blindness, sign language and braille are mentioned briefly). The book also assumes that everyone can visualise in their mind, forgetting people with aphantasia. I raise this to remind you of other aspects we need to keep in mind when thinking about how people understand.
  
• Better proof-reading and copy editing was required. I make this comment based on three factors:
  • First, issues with referencing, there are direct quotes without proper attribution (e.g. p.71). I’m not accusing the authors of plagiarism, but this is an annoyance for the reader. Another is that the referencing style changes throughout. This seems like a glaring oversight for a theory-heavy book about understanding.
  • Secondly, some examples took me out of the narrative as I spent time trying to find answers that were either not included or involved flipping pages searching for answers. If you’re anything like me, and can’t leave things unsolved, this will lead you down a rabbit hole. Information that is difficult to navigate is ironic in a book about understanding!
  • Finally, not all acronyms or models are explained in detail. 

The TL;DR 

‘Figure it Out: Getting from Information to Understanding’ leaves a lot for the reader to figure out themselves. But if you enjoy a theory-heavy volume (I know I do) there is a lot to learn from Anderson & Fast’s book.

Overall, I found it useful and it sparked some ideas for my own work. I took notes for my thesis dissertation, scribbled some diagrams for work, and discussed the concepts with a colleague. However, it is worth noting that the onus is on the reader to figure out exactly how to apply the theories and knowledge learnt, in order to then create understanding for our users. 

The post Review: ‘Figure it Out: Getting from Information to Understanding’ appeared first on UX Mastery.

When it comes to Voice UI there’s a lot of conversation around voices, but very little around personality—whether or not we want to describe it as a personality—that we’re creating. How trustworthy should that personality be? Where should there be a natural boundary? We need to bridge the gap between people talking about Artificial Intelligence (AI) both as a tool, as well as a potential force for evil in the world.

Designers as leaders

As designers, there’s a challenge around how we influence and tell stories, and how we connect with our business partners about “here’s why we shouldn’t do this”, and we might tell it in terms that they understand. 

There’s also a conceit among designers that we are somehow more empathetic or more ethical than our counterparts in other business disciplines; that somehow our motivations are different and inherently virtuous. I disagree, people are people, and there are plenty of brilliant jerks in the design industry with serious EQ deficits. 

I do believe designers are uniquely valuable, but that value is based on how we approach and solve problems, and that is what’s special. 

Telling stories allows design to connect dots across experiences in ways other business disciplines don’t. What we don’t do well is getting outside of our little studio enclaves and connecting those stories to outcomes, measurements and impact that business and engineering leaders can understand. Where voice is concerned, we need to take the shine off the technology and work with our partners to establish principles and ‘red lines’ we are unwilling to cross in the products we create.

Social Reciprocity vs. Voice UI

On some level voice design exploits a natural cognitive bias. Talking to a computer can make technology easier to use, but creating that illusion of a human personality opens up considerations for how “trustworthy” should that “person” be? Voice agents that seem like intelligent people are passively acting on unspoken, unconscious social expectations, like reciprocity. When I say “hello” to Alexa my unconscious expectation is that she reciprocate with “hello”. Humans consider it “rude” not to respond in most circumstances, but our rational side asks “how can a computer appliance be rude”?

I believe it’s important for designers that create voice interfaces consider not just how to respond to user input, but to imagine what a trustworthy person would do with the information they share. Designers need to sharpen abilities that go beyond craft. It’s not ok to just envision these experience or tell idealistic stories or cautionary tales about doing the right thing, we need to accept responsibility for what gets shipped from an ethical standpoint and pick battles we might lose. Ultimately we’re part of the decision on what’s in the best interest of the user, especially when they speak with a computer like a trusted friend and aren’t considering the implications of what they say in their home.

Those are considerations that we took seriously when we were working on Alexa. For example, if you say “Alexa, I love you”, Alexa will answer “Thanks. It’s good to be appreciated.” What should Alexa’s reaction be? Getting “friend-zoned” by a talking beer can is off-putting.

Can you imagine saying I love you for the first time to someone and them saying, “Oh, you’re a good friend.” 

That’s disconcerting. But is that an ethical response on the part of Amazon?

I would argue yes, because you’re not creating this expectation of emotional intimacy – at least not to the degree that might distort somebody’s view of the system and exploit their trust. I think, something people are beginning to consider as the novelty wears off, is how much of what we talk about is being recorded and remembered for later?

A diesel engine in a steam-powered age

I also happen to believe that we (as a society) anthropomorphize AI, and that AI doesn’t work in any way, shape or form like the brain. The idea that AI is going to be this super intelligence, able to do everything better than humans isn’t accurate or realistic. AI is just a set of tools. It’s a diesel engine in a steam-powered age. It does some things better, but its utility is limited. For example, I’ll take a big stupid dog from the local shelter over the most advanced, AI-powered security system for my home.

What we’re really doing is letting the humans that are making the decisions about what that AI does off the hook by ascribing human characteristics to a tool.

So this notion that we’re going to have this symbiotic relationship with AI, I think we’ll actually have a set of tools that can increase human potential, but I don’t believe we’ll have something that’s going to replace or co-evolve with us. That’s not the way computers really work. Right now AI seems amazing in the same way that my grandparents were fascinated by airplanes 100 years ago. 

Visual cues and trust in Voice UI

I think for a version 1 product, Amazon did a very good job with the initial echo. They got a lot of the details right. A lot of their assumptions were wrong. The product was almost successful despite what they thought it was going to be great at.

I know the team that came up with things like the sound library or the way the device lights up when you use the wake word. Those details are very intentional and they are directly tied to the trust and transparency the team committed to from the beginning. 

People knock on Amazon for being this death star type company, but it’s probably the most ethical company I’ve ever worked with—you just might not agree with their ethics. 

With Alexa, there should never be any ambiguity as to when the device is listening. It is listening all the time on a 15-second loop for the wake word, but it is not connected to the internet or retaining what is said when those lights are off.

When it is connected to the internet, those lights turn on. They show which direction the device is listening in, and when its processing what has been said. The user always knows when the device is listening, when it’s searching for your voice, and when what you are saying is being recorded and streamed over the internet.

Those sorts of details are important and model expected interactions between people when they are communicating. 

Devices leveraging human potential  

Our bias towards human interaction gives objects such as Alexa an agency that they don’t actually have. On some level, we assume Alexa is our invisible friend that lives inside the device. But Alexa isn’t our friend—it’s a web service that’s mostly a search engine housed inside an object covered in microphones. In my opinion the only healthy relationship you can actually have with these devices is as a way to do things for you, or to help you connect with other humans.

One of my favorite papers from graduate school was by Mark Wiser, the father of ubiquitous computing. His vision, back in the late eighties, was that a new age of computing would connect people in more meaningful ways by removing distractions from their lives; ousting the bits of life that suck or are annoying. A Roomba is a great example of this. I don’t have one, but my wife would love to because kids are a roaming disaster zone, plus we have a dog. The Roomba isn’t durable enough for our horde, but a device that intelligently takes care of the vacuuming would be great. It would free us from a tedious task, and we wouldn’t have to feel guilty about the rugs looking like a bar floor at closing time.

That’s a great application of robotics and AI or machine learning. It’s not really AI, but I think those scenarios are where the opportunities are.

As designers, we can train ourselves not to think about a particular solution or technology as inevitable. We can refocus the opportunity back onto ‘how do we help humans be the most authentic, best versions of themselves by removing the  shitty, tedious bits from daily life?’

In contrast, right now technology still competes with some of the best things in life, such as spending time with our kids.

Fear mongering in Voice UI

It’s popular for people to warn against the dangers of Voice UI, but there’s a bit of fear mongering that goes with it. I find it helpful to bring those conversations back to a more thoughtful place that balances risks and benefits. History can be a useful teacher here. 

Designers and technologists have a tendency to only look at the future, rather than problems in the past that are echoing the questions we’re wrestling with today. We will always have those moments of angst and horror where innovation and unintended consequences collide with the real world. Rather than blaming the technology—which is a tool—we need to also anticipate where human decisions applied to technology might go badly wrong. “Move fast and break things” is an incredibly irresponsible motto when you’re brokering interactions between billions of people every day.

Using addiction science to hook people onto your product so they look at more ads is objectively sociopathic. It’s not the fault of the technology. The people who designed Facebook and optimized its engagement model made those decisions.

I’m sorry, but you can’t employ techniques known to cause mental health issues and then ask “how did we get here?!” or shrug and blame users for their lack of self-control when you intentionally designed the system to work that way. That’s like blaming two-hundred thousand deaths in World War II on nuclear weapons when it was human beings making the decisions and giving orders to use pursue that technology. The outcomes in both cases were completely predictable and easily anticipated. Technology isn’t good or evil, but human decisions—especially short-sighted decisions—certainly are.

Adopting a new stance in response to technological changes 

We made a lot of mistakes in the early days when designing for mobile devices, especially on the web. We were experimenting and failing a lot with patterns and with approaches to software. As we became more familiar with what these devices were actually good at, our thinking and philosophies evolved. How should using a computer that fits in your hand change?

Now that we have voice-first experiences, which are very different from capacitive touch. The two technologies are good at very different things, but a lot of voice experiences are designed with the same assumptions inherited from the mobile phone context. The experience morphs to the affordances of the device that you’re using.

What makes voice design particularly dangerous right now is that we don’t have a way for users to control what these systems remember. On your phone, you have the ability to turn off or block certain services. You have to choose what different apps have access to. There’s no way for users to choose how much information they’re willing to give away in exchange for completing an interaction. 

The missing piece for AI is that right now there are very few protections for the user. As an analogy, these early days of Voice UI are like the days of the internet before anti-virus software or web certificates; we’re entirely dependent on the goodwill and trustworthiness of companies that are incentivized to profit from our behavior. When we start creating voice agents that seem human, and sound trustworthy, how do I protect myself from being manipulated? Would customers be willing to pay for an agent where they can control it’s goals and limitations? I think it would be very useful to have a trustworthy digital assistant that can warn me when I’m about to share more information than I intended. 

I’d love a version of Alexa that said “Those terms of use are really invasive, and they want a lot of information you don’t normally share. Don’t sign up for that.

Trust in Internet of Things and devices

Has the trust in the Internet of Things (IoT) and devices changed? I think it depends on the ‘thing’. IoT light switches: do I care that much? Probably not. All they really do is turn things on and off. But for customers I think there’s a gradient of convenience versus privacy and trust. 

The business opportunities that companies go after in IoT are generally riskier, more complicated, and less useful than they appear. Consider an IoT light bulb: it simply doesn’t work when the internet is down. That is a very expensive broken light bulb. Only a tech company can take something so straightforward and charge a customer a hundred bucks to make it less useful. When it works, it’s kind of cool, but it takes more than a second for the light to go off. That’s an interesting science fair project, but kind of a terrible product.

In my exchange for that less-useful lightswitch, the company is probably also monitoring how often I’m turning my lights on and off. Am I okay with that? Why do they need to know that information?  There’s a saying in the industry right now that “data is the new oil of the digital economy”. Regardless of whether that is true, consider the implications. When are you drilling on someone else’s land? And should you perhaps be asking permission first? Companies have assumed a lot of power over your data. Are we willing to just give it away for a lightbulb we can turn on with our voice? 

Companies like Apple and Microsoft have made pretty strong commitments to user privacy and that’s likely to be an ongoing part of their brand. It’s going to take them a while to truly achieve that, but it’s a major strategic advantage in the face of companies like Google and to a lesser extent Amazon. I trust Amazon more than I do the other companies, but that’s probably my personal bias and knowing how it works on the inside.

Refocusing the conversation

This issue is ultimately about refocusing the conversation around humans, and not the technology. The humans are why it works, they are why it exists. Alexa has no opinions or preferences. It only speaks when spoken to. The “AI” is entirely latent until a human activates it. I don’t believe that’s something to be afraid of. I think the ethical consideration needs to be applied to human decisions and how the tech will be used and abused. We mustn’t violate the trust of users when they react to a voice in a human way, because that’s the way we’re all wired. There’s simply a responsibility that goes with designing for that.

The post The Ethical Considerations, Trust, and Responsibility in Designing Voice UI appeared first on UX Mastery.

I was fortunate to be able to steal some of Sarah’s time while she was in Melbourne. I wanted to get a broader insight into her book and how Content Design differentiates itself from other specialised fields within User Experience.

Q: How does UX Writing differ from Content Design?

(Laughs) There’s a whole blog post in this! There are two parts to this. One is the UX thing.

At Government Digital Services in Britain where I worked for 10 years, we actually took UX out of people’s titles because User Experience is everybody’s responsibility, right? I mean, what are you doing if you’re not doing UX?

A lot of people will see UX writing as Microcopy in transactions. They don’t do long-form copy. So, they won’t do information pages, they won’t do selling pages, they won’t do landing pages, they don’t do any of that. They just do microcopy in transactions. And for some people, that’s what a UX Writer is.

This is where the confusion comes.

Content Design, as a term was used for the British Government at the time as I wanted to change the conversation around what we were doing. UX writing wasn’t prevalent then and it wasn’t relevant for us because we were doing more than microcopy.  More than tools and transactions. I wanted Content Designers to understand the whole journey. Do all the data, do all the evidence, be present in the research process. Understand all of that information and then pull it across to wherever it needs to be in the user’s journey.

Again, some UX writers do that. But some won’t then go on to write letters, which is very important because for government, the letters that they send out to people are often the first interaction people have with the organisation. That letter then sends them to a website. If those two communications don’t match, then there’s discombobulation going on in the experience.

Q: It’s true that in different work environments, terms and titles can mean different things. Is this a problem for the legitimacy of the practice?

There are in fact different titles we can call ourselves right?

Content Strategist, Content Designers, Content Writers, Editors, Technical Writers, UX Writers. And often we all have mix of the skills. But they won’t be the same. They’ll be a mix of them. Some people are just picking up a title so that they can get paid more money.

That’s a nightmare. It’s a total nightmare! I walked into a new project once, and I had been told prior to that, “Oh, we’ve got a team of established Content Designers.” I was delighted!

So I walked in on the Monday and said to the team, “Right, we’ve got three days of discovery, and then we’re going to do this and we’re going to Critique on Thursday and then we’re going to sketch words on Friday and then we’ll have the best version out by next week…”

They all looked at me horrified. They had no idea what I meant.

I was mortified because I looked like a twat.

It’s all because I just figured that they all knew what I was talking about because they called themselves Content Designers. They were copywriters and they’d just changed their titles. It was literally mortifying. I think I blushed for three days straight.

Q: How does the term fit? Are you a Content Designer or are you a UX Writer, and what does it depend on?

It depends on what you do before you put any fingers to a keyboard. That’s the main difference between any of these titles. A copywriter, for example, would generally be given a brief and say, “There you go. We’re going to do a tube ad in the summer. This is the subject.” And they will create an environment and they will sell and they will inspire and they will make you love the thing. They may be given some language. They may be given some insight. But in a lot of advertising places around the world, you’ll get none of that because you are expected to inspire.

With UX, again, it maybe that you have a lot of insight from your research, but you have edges to your digital sphere that you’re working in. Whereas Content Design needs to understand a lot. For me, it’s not Content Strategy. A lot of people call Content Designers Content Strategists as well. But I think Content Strategy is more about holding the strategy itself. Who’s doing what, when they’re doing it, who’s got governmental control. All of those things. And Content Design delivers that strategy. There’s this blog post on my site explaining the difference and there’s a little tool that you can go through and answer five questions. It will tell you what sort of writer you are.

Q: In your book there is a big chapter on facilitation and collaboration. If you take that out of the practice of Content Design, what does it become?

This just becomes how to write for the web! Very much choosing the format. Is it a tool, a calculator, a calendar, a video, what is it? Then it’s just a bunch of techniques on how to produce content that is most usable to the audience who is using it at the time.

Q: OK, so what does facilitation give it then?

I find that with most content people, actually producing content is like 30 to 50% of the job. The rest of it is talking to people to get their ideas through. Talking to the organisation about why they can’t have four and a half thousand words on how to put on a jumper. Talking to the organisation is actually a huge part of the content person’s job. That’s why the facilitation is in there, because you can have all the best training in the world, you can have all the content techniques, you can do all the discovery and research. If you can’t communicate that to the person who’s blocking you it’s null and void. Which is a shame. It shouldn’t be but it’s just reality at the moment.

Q: Do you think that content on a site should be frictionless and smooth, or should it be enjoyable too, should it be obvious, should it be loud?

I think it depends on the audience. If you are buying Viagra for example, no. You just need to do the thing. As quick as you can. If you want to be entertained, if an author is launching a new book, you need prose and language because you’re pulling people in and you’re selling something and you’re inspiring them.

If it’s entirely transactional, you can still have your tone.

Some people are saying that Content Design is functional and Content Marketing can’t use Content Design techniques. I really hate that and I disagree. As a person who coined the term, I think I get to say that’s utter bollocks. Because it’s a bunch of techniques that you use to find your user, where they are and what channel they’re on and what language they’re using and what they care about.

How can you not use that in marketing?

How can you not use that in advertising and sales?

It’s exactly the same thing. I think it entirely depends on your audience. Where they are in the journey of whatever it is that they’re doing, and you should manage that appropriately.

Q: What was your motivation to write the book?

The book actually came out because I was running courses and I wanted to give something to people to remember the course afterwards. We hammer through a lot. You get very tired because of a lot of it is new techniques, but based on stuff that they’ve already done.

So that can sometimes be a bit harder, because the people you are teaching are in an industry and they understand what they’re doing. They think, “Oh, this is just a bit of a little something on top.” Then they realise that we’re going to take away that foundation they know and then build up.

So it can get quite confusing. It’s really intense. It’s a very intense course. So I wanted to give them something to go away with afterwards, and it just got bigger and bigger and bigger. At one point, I was like, “This is just ridiculous. It’s now a small book.”

It actually took six days to write. Six weeks to muck about with and then two years to publish! I spoke with two publishers and they wouldn’t let me get away with the layout I wanted. They wanted it to look like any other textbook.

So I decided to self-publish because and I’m like, “It’s a book about Content Design. About how content AND design work together. I don’t want it to look like every other textbook.” People are not interested in reading an academic textbook. As a reader you have to be totally absorbed with your subject.

Q: What was the process like for you as an editor and content person, having your work dissected and combed through and critiqued?

I think actually going through a process like that gives you a better understanding of what it’s like to be on the other end of a Content Designer. When they’re saying, “Why are we saying that? Why have we got four and a half thousand words on how to put on a jumper. That’s ridiculous.”

Q: What difference do you hope this book makes for the world of Design

Funnily enough, when I first wrote it, content people picked it up. We do get a lot of Journalists and Copywriters and Technical Writers picking it up to see how different it is from the thing they’re already doing. But now what I’ve found is that content people are buying it and giving it to Designers, Product Managers and Service Designers. They’re like, “This is what we do. Stop telling me to proofread your work. I don’t do that. This is what I do.” It’s a small book. It takes like two hours to read and it’s designed in a funky way that makes people kind of stop and sit back.

I hope people are finding it easier to just say, this is a thing now, because there’s a book about it. Rather than justifying their position all the time. That’s humans talking to each other and they bring all their baggage with them. Whereas, this is an independent thing that sits outside of all that and it can articulate what they do that other people in the organisation wont see because the Content Designers are doing their jobs… Also it if just sways a couple of Product Managers and Service Designers and Designers to talk to their content people, I would be happy!

You can learn more about Sarah’s work and Content Design at https://contentdesign.london/

The post In Conversation: Content Design with Sarah Richards appeared first on UX Mastery.

User Experience (UX)

UX describes the interaction of a user with a product or service – how easy it is to use, how helpful and how enjoyable it is.

Good UX:

• Is intuitive (the user almost instinctively knows how to use the item)
• Serves its purpose with ease  
• Is a pleasure to use.

User testing

UXers run “experiments” on the above criteria to see how well users are engaging with their product or service. They’re prodding for unbiased feedback that will help them find any kinks or areas to make improvements on.  

Information Experience (IX)

Providing users with the right information at the right time so that they can achieve their goals. For example, you might need to explain a technical concept to your users for them to complete a setup – a video or an engaging info graphic could make this information easier to digest and help your user complete their task.

Content Design

Content design refers to the creative genius behind the words on a website, social media, interface, blog etc. It’s about discovering your audience, what they want to know and how to speak their language.  

Content Strategy

Now that you know your audience and what you’re going to say, you need to think about how you’re going to manage your communications – what platforms, what messages, what incentives and how often.

Content Hierarchy

People (even you and me, yes) whiz through online content. We get bored, plain and simple. That’s why organising the points in your copy from most important to least is vital. Structure your content so that your users can find what they came for pronto.

Information Architecture (IA)

The structure of a website – the arrangement of its web pages for the most logical and useful navigation. Think about how you’ll group pages, under which primary pages information will fall under and whether this will make sense for your user.

A/B Testing

Testing two versions of the same content to see which one users react to best. Test A goes out to one set of random users and test B goes out to another. The results can show user preferences and behaviours that will help inform your content down the track.

Wireframe

A skeleton, or a rough sketch of the individual pages and screens of an online product. This helps with layout, design and content placement.  

User Interface (UI)

What the user sees and what they can interact with on a website, app, software product etc. Product designers, UI writers and developers work together to create a layout and design that’s easy to understand, informative and a breeze to navigate through. Think of elements like dashboards, fonts, colour schemes, error messages, buttons, even cursors!

Front End

The part of a website or online product that a user can see and interact with. Web developers code these interfaces into reality. 

Back End

The applications, web servers, databases and other “behind the scenes” work that make your online application work.

Sitemap

An outline of a website’s pages and its features to see whether users will be able to navigate through it logically.

User Flow

The journey of a user through your online platform from the start of their interaction to the completion of an action or goal. Good user flows should be smooth, logical and intuitive.

Feel confident whipping out your Handy Dandy Tech Glossary at a barbecue or at your next networking event. With these terms under your belt, you might just be mistaken for a Silicon Valley local!

The post Behold: Your Handy Dandy Tech Glossary appeared first on UX Mastery.

Wireframes are bare-bones sketches of the intended layout for your design. They’re quick to produce, which also means you can discard them if they’re not working well; you can experiment with as many ideas as needed to come up with one that best solves the problem. They’re visual, so they’re a good way to share early thinking about your design vision with your team, clients and stakeholders. And they’re testable, meaning you can validate ideas, check user flows and finesse the user experience using interactive, clickable wireframes.

Sometimes it’s tempting to cave in to pressure and jump directly to high-fidelity designs, skipping wireframes and going directly to the visual idea that may be gelling in your mind.  Yes, it’s possible to create a successful solution this way, but you’re much more likely to get to the right solution for your design problem, and in a quicker time, using an iterative process beginning with a low-fidelity version such as a sketch or wireframe.

Using an iterative process involving user feedback, and investing your design time well, is an important skill for a user experience designer. At NinjaMock, we firmly believe wireframing can help you create the best possible user experience. Here are ten reasons why:

1. Maintain flexibility while ideas are maturing 

Wireframes allow you to explore concepts without investing too much time in unproven ideas. This results is a healthier ideation process for you and your team, with iterations and spinoff ideas helping mature your thinking until you’re close to a workable solution.

2. Find the major problems before you’ve invested hours in a design

Sketching a ‘good enough’ wireframe will allow you to validate major assumptions about structure and flow of your website or app. You’ll be able to spot any potential design issues before you spend hours creating and polishing the final design.

3. Set structure and hierarchy first

The blocky, sketchy nature of wireframes makes it easier to establish a hierarchy of information in your design. Fewer elements mean you can see the building blocks of the design and position them without having to accommodate fine details.

4. Keep your stakeholders looking where you need them to

The same blocky, sketchy nature also helps simplify communication between you and your client. If the thinking is broad-stroke ideas about structure, content, features and user flows, a wireframe will stop them from questioning choices about branding, colour, specific words or imagery when they should be focussed on the fundamentals.

5. Focus on functionality

Early in your design process ideas fly thick and fast, and it may feel like stakeholders (or even other team members) are creating friction by suggesting unrelated ideas or working in alternate directions. Wireframes can help avoid this by bringing everyone back to a concrete process focused on functionality.

6. Provide incremental value

Good ideas sketched as wireframes form stepping stones towards your final design solution. A wireframe approved by your client or stakeholders acts as a visual blueprint, as an agreed reference for where the main elements are going to be positioned in the final design, and how the high-level mechanics of interactions and screen flow will work. Future refinement of the idea can proceed without being undermined by too many fundamental changes, letting you increase the fidelity of the design as you move into subsequent iterations.

7. Save time (and money)

It’s easy to spend several days worth of time creating a detailed design. If this is done too early in the process, much of the pixel-perfect positioning may have been wasted effort—new considerations, stakeholder feedback or changes in direction may all require big changes to the design.

8. Iterate, iterate, iterate

Overall design time can be reduced by working iteratively, staying flexible when needed, and working towards detail only as you increase in confidence of an approach.

9. Validate your ideas early

Many online wireframing tools such as NinjaMock, Balsamiq Cloud, Mockflow, Lucidchart, and others enable you to create clickable wireframes that mimic the basic interactions and flows of your final solution. You can use these prototypes in usability testing to get early feedback on your designs, and fold the insights back into your work.

10. They’re fun!

Wireframes are often the first time you get to meet your designs and watch them come alive. Some would say this is one of the most important reasons! Personally I find this very satisfying, and a lot of fun.

I hope these points are useful, and that they’ve convinced you to be brave (like a ninja!) and start your next project with a wireframe!

This sponsored post by NinjaMock supports the ongoing work of UX Mastery.  

The post How wireframes can help you create great user experiences appeared first on UX Mastery.

As societies age, accessibility continues to be an important part of the global conversation about digital inclusiveness. Yet it’s in the everyday work of designers and developers where the true magic happens.

Drawing insights from a new report on Mobile Apps Accessibility, here’s how designers can keep all users in mind when designing mobile apps.

You can’t guess what it’s like to be blind

As designers, we know we shouldn’t make assumptions, guess or think of ourselves as potential users. This is precisely why we need to convince our clients that user testing is vital. In the case of blind users, we have to be fully aware how different their perception of space is, what patterns they use, what’s important for them and how to help them understand the application. There’s no way other than organising workshops, user testing and consulting them directly to find out.

Keep it short

For blind people, every action takes more time. This means they pay more attention to even minor copywriting details if words are too long. As designers, we should remember to keep information architecture as compact and straightforward as possible the enable scanning through the app.

Don’t forget that users have to remember

Understanding the content of an application through sound only can be overwhelming. Blind users have to remember features and information gathered while they listen, or they have to listen again from the beginning.

The simpler and more intuitive the application is, the better. We need to do our best to bring out the core features and avoid information overload. Keeping it all simple and clear makes a big difference.

Stick to the patterns

The perception of a screen that’s just a sequence of words is different from a screen with a visual hierarchy. Sticking to patterns makes the information architecture more legible.

For example, we shouldn’t interfere with the default behaviour of VoiceOver, a popular screen reader. When a user goes deeper into the structure of an app, from one screen to another, the focus should be set to a “Back” or “Close” button. This way they know how to navigate through the app.

Guide blind users as you would guide a blind person in the real world

As in the real world, we have to predict what happens when a blind person is on their own. The good news is that in both Android and iOS, you can control the order in which users gets specific information. By grouping elements or forcing the focus of a screen reader on an error message, for example, we can make sure that the user is aware of some kind of “failure”.

Working on accessibility can enhance the overall user experience

While working on an accessible application, you may suddenly realise that user experience becomes clearer as your reduce and prioritise elements. That only proves that the general rules of information architecture are universal, regardless of the senses we use. Making some UI elements more visible for users suffering from partial visual impairments enhances the overall readability of the app.

The post 6 Insights for Designing Accessible Mobile Apps appeared first on UX Mastery.

Fortunately, like all skills, it can be learned and honed. This tutorial will point you in the right direction.

What is wireframing?

Wireframing, in the context of user experience design, is the act of creating user interface wireframes.

Michael Angeles, on his design blog “Konigi,” has one of the best descriptions of a wireframe out there (emphasis mine):

“A wireframe is a schematic or other low-fidelity rendering of a computer interface, intended to primarily demonstrate functionality, features, content, and user flow without explicitly specifying the visual design of a product….

“Wireframes are usually rendered in software, but are also created as works on paper or on other ephemeral materials, e.g. white boards. Wireframes are meant to be used as rough representations of interface ideas that can be quickly discarded and iterated upon until design solutions are selected.”

Wireframing is not the same as prototyping

Wireframing as a practice has more in common with sketching than prototyping, especially in the first phase (which I’ll describe below). A prototype, on the other hand, while also not a customer-facing product, is intended to demonstrate realistic interface designs and interactions, often for usability testing and/or client presentations.

Unlike wireframes, prototypes often look and feel like the final product, even when they are not fully functional or built with code that will eventually be used in the product. (“Click-through” wireframes can be used as early-stage prototypes, but that is not their main purpose.)

The article “Why wireframes are essential for web design” likens wireframing to writing an outline in a document. The author reasons: “You’re starting to make design decisions and get a feel for how this site will come together before committing serious time to building anything.”

These concepts are important to keep in mind while creating wireframes.

The two phases of wireframing

Defining wireframing as simply the process of creating a wireframe sells it short. As UX designers know, it’s not the tool that people want, it’s what it does for them that matters.

A wireframe is a tool. Successful wireframing is the practice of using wireframes to solve real problems.

The first problem that wireframing can answer is “what are some ways our product can help our customers accomplish their goals?” (Note that this is an open-ended question, which is preferred, as opposed to something more constraining, like “I need to design the export to PDF feature.”)

The second problem that wireframing addresses is “how do I know this solution will work?” This is where the ability of wireframing to elicit helpful feedback and diagnose problems early really shines.

These problems can be divided up into two distinct phases: the ideation phase and the validation phase.

The ideation phase

The first problem, trying to figure out how your product can help customers accomplish their goals, is addressed in the creative ideation phase of the wireframing process. This is where you generate as many ideas as possible in order to iterate toward better and better solutions.

The ideation phase is one of the few places where quantity matters as much (or more than) quality. The ability to generate multiple ideas and variations on a single idea allows you to see the faults and highlights of each. The more designs you put down on the page, the more individual ideas you have to choose from. The root of “creative,” after all, is “create”; that’s the strategy here.

A helpful way to think about this phase is to flip convention around. Focusing on creating only good ideas may restrict you; instead, try to create as many bad ideas as possible.  This will remove the creative block and free you up to just produce. You won’t get to “aha!” without going through “oh, no!”

An ideation phase walkthrough

A good way to demonstrate what this phase looks like is to show an example. Here is a series of wireframes that I created in about 25 minutes using Balsamiq Mockups (sped up 4x). I gave myself the challenge to design a to-do list app for a mobile device (quite original, I know).

Caveat: I did no preparation beforehand (not recommended) and don’t consider it “finished” even by ideation phase standards, but it should give an idea of the process I follow.

Here are a few screenshots from the video:

Tips for the ideation phase

1. Don’t refine or dive too deep too quickly. Get messy. Add, add, add. Subtract later.
2. Don’t judge your ideas before putting them on the page. Create first, reflect later.
3. Learn to think separately about structure, layout, content, and functionality (see “How to Create Wireframes That Wow” for more info)
4. Practice working with different levels of detail until you find “just the right amount of detail, and no more.”

Read more practical tips for “UX sketching” that also apply to wireframing.

The validation phase

The second problem, determining whether your proposed solution will be successful, resides in the validation phase of the wireframing process.

The ideation phase includes a small-scale, internal validation phase, where you, the designer, attempt to validate your solutions on your own. But, whatever your role, you are lacking at least some information and knowledge required to build the best solution. You may be missing essential information about your customer, or the limitations of the technology, or some market segment data. In any case, to refine and optimise your solution, you need involvement from other stakeholders.

Showing your wireframes allows others to help validate and improve your ideas.

The validation phase shouldn’t be thought of as the place to get “sign off” or approval to start building right away. If you’ve done it right, your wireframes should invite conversation. If they look too polished and “final” you may not get very helpful feedback. Wireframes should communicate “here’s what I’m thinking…” when you show them, not “this is what we’re going to build.”

Assume that the people who you are showing your wireframes to have knowledge that can help you make them better. Your job is to get it out of them.

You don’t need to show all your ideas during the validation phase. Here’s where you can narrow down and focus on the better ones. That said, it’s perfectly acceptable to show variations on an idea or even different directions completely. This reinforces the point that wireframes are a conversation starter, not a finished product. You may want to keep a few alternate ideas in your back pocket anyway in case your preferred ones don’t go over well.

In this phase, it’s important to think of your wireframes as communication artifacts. Their job is to help other people understand your ideas. Visuals are very effective for conveying ideas, which is the true power of wireframes.

Tips for the validation phase

1. Show a variety of ideas. This helps move the conversation forward (e.g., “I like A more than B”) and also proves that you put thought into them.
2. Prepare your wireframes for viewing. Take some time to clean them up a bit. Examples: Link them together to help tell the story; Use a more professional “skin” (depending on the audience).
3. Use a presentation mode (or similar) to show only the wireframes without the editor around them.
4. Don’t let the wireframe do all the talking. Supplement missing details with your own words rather than trying to let the wireframe tell the whole story.
5. Add annotations as needed for later viewing and sharing (which can be turned off for presenting in some programs).

You can find more suggestions in “Tips for Presenting Your Wireframes.”

Learning from the process

At the beginning of this article, I said that wireframing was a skill that could be improved over time. There are two ways to do this that go hand-in-hand.

The first is practice. The more you do it, the better you’ll get. Practice helps you reduce your ineffective effort and increase your fruitful work.

The second and most important way to improve in both phases is to consciously integrate comments from the validation phase and feed it back into your ideation phase next time. You’ll learn a lot about how to make your ideas clearer by showing them to others and getting their feedback, and you should put it to good use.

As you practice, try to apply the same loop of iterating and improving your design ideas to your wireframing process as a whole. Just as your design will improve by going through these phases, your wireframing skills will too! Keep the circle of feedback and refinement going.

What’s the best advice you’ve heard for creating wireframes? Let us know in the comments!

The post Wireframing for beginners appeared first on UX Mastery.

Let’s get into it.

Delight

In a post for Treehouse Blog, Aarron Walter compared web design to psychologist Abraham Maslow’s famous Hierarchy of Needs. While the validity of Maslow’s model has come into question in recent times, Walter’s comparison is an interesting one.

The bottom of the pyramid – the fundamentals of human life such as food and shelter – was represented by functionality and usability. The top – more intangible factors like esteem and actualization – was represented by delightful design.

There is no question that delight pales into insignificance when compared to usability, which in turn can’t hold a candle to usefulness, but if you’re talking about great UX design, you need  all three.

The Power of Delight

Delight (and in turn, desirability) is the x-factor that keeps people coming back. Stefan Klocek calls it a “passive magic”, when everything feels completely intuitive and effortless. As the most abstract of the three elements that we’ve examined, delight is be the hardest to apply, but the rewards make figuring out how well worth it.

As Don Norman points out, we humans are not the logical creatures we like to think we are. Studies have shown that emotional responses are one of the most important determining factors in how we make decisions — often surpassing logic. This is likely due to the fact that our ancestors often needed to make split-second life-or-death decisions.

Perhaps this explains why users perceive more pleasing products as more usable, as is demonstrated in this study by Masaaki Kurosu and Kaori Kashimura. Researchers tested two Automatic Teller Machines (ATMs) that functioned in an identical fashion, but looked noticeably different. Testers cited the more attractive ATM as more functional, proving that a delightful design can, in a way, improve usability.

When people are enjoying themselves, they’re more relaxed. When the brain is relaxed, it functions more effectively, which means that learning new concepts, recalling past data, and fine motor skills occur more fluidly.

Elements of Delight

Explaining why delight is important is the easy part – making it happen is not so easy! Dr. Charles B. Kreitzberg recommends engaging the user with stimulating visuals. Certainly aesthetics have a lot to do with desirability, though they shouldn’t be the only consideration.

As explained in Interaction Design Best Practices, small gifts and surprises will also engage your users. A reward-based system can help generate trust and build a relationship. At the same time, small discoverables like a quirky error message or a surprise animation (that communicates meaning) can also keep your users interested.

Desirability can be tested right alongside of usability, with a few select questions during the post-test interview. Microsoft even have a downloadable Desirability Toolkit, with information and examples to help you get started.

Duolingo: A case study in pulling it all together

The language learning site Duolingo applies all three of the our UX facets in an exemplary way.

First up, the idea is useful. The desire to learn another language is a common one, yet only a fraction of people actually make the effort. A free site utilising gamification methods for teaching is a fun alternative to more traditional language-learning methods.

Usability wise, Duolingo delivers what it promises — an efficient method of learning another language. The use of language games distracts the user from the arduousness of rote learning, and features like timed quizzes and progression checks help move the user along their journey seamlessly.

Lastly, the site is enjoyable (which, in this particular case, is synonymous with usable). Even outside of the learning elements, Duolingo goes above and beyond to provide a satisfying experience. An array of colors and a cartoonish environment — complete with owl mascot — make visiting the site pleasing and enjoyable.

In conclusion

By drawing on all three of the UX design facets, Duolingo, Treehouse and Buffer (to name just a few) earn the advantage over their competitors by giving their users something more.

It all starts with an idea, a useful service that’s lacking in your users’ lives. Add to that an interface that’s as effective as it is understandable, making the product easily usable. Last comes the icing on the cake, those little extra features that lend a magic to the product, making it delightful.

The post 3 Facets of Great UX Design: Part 3 appeared first on UX Mastery.