Tag: Usability

In the article, 101: Introduction to Usability, Jakob Nielson explains the basic facts about website usability and how to create something that is appealing. He explains how the word “usability” refers to certain methods for improved ease-of-use, especially during the design process. Usability is defined by 5 components: learnability, efficiency, memorability, errors, satisfaction. These terms also tie in with utility, as usability and utility are very common words and share common meaning. Utility is whether something provides the features you need, whereas usability is how easy & pleasant the features are to use. Usability is important as if a website is difficult to use and navigate, people won’t use it. This is why the focus on usability is so great as consumers demand something that is easy. If a consumer cannot find or navigate their product, they cannot buy it either. This is why it’s important for websites to analyze their users and to see where they succeed and where they encounter problems. To keep up to date and improve a website, you need to run tests or user focused studies once per week. 

Nielson, Jakob. “First Rule of Usability? Don’t Listen to Users.” Nielsen Norman Group, August 4, 2001. www.nngroup.com/articles/first-rule-of-usability-dont-listen-to-users/.

The article titled “5 Principles of Visual-Design” in UX identifies how to “verbalize why a layout is visually attractive”. The article states that graphics use the principles of good design to both increase usability and drive engagement. Visual-design principles tell us how design elements create meaningful visuals. These design elements include line,shape, color, grid, and shape. Specifically, the five principles that impact UX are Scale, Visual Hierarchy, Balance, Contrast, and Gestalt. The article then identifies and explains each of these principles and their contribution to user experience. Scale and contrast are the two most commonly used principles. In addition, some elements are interdependent such as both scale and visual hierarchy. Scale is said to help visual hierarchy therefore it is important to include a variety of scales for different design elements. The importance of balance in a visual design is also emphasized stating that without it, there is no equality. It is important to remember that not only the quantity of elements in a design but the area taken is equally significant.

“5 Principles Of Visual-Design In UX”. Nielsen Norman Group, 2020, https://www.nngroup.com/articles/principles-visual-design/.

In the article “5 Principles of Visual-Design in UX”, they discuss 5 principles on what creates a beautiful design and increases usability. These principles are known as Visual design principles, they are scale, visual hierarchy, balance, contract, and gestalt. When all five of these principles come together, they make one beautiful design. Scale must deal with using relative size to signal importance (Gordon). Visual Hierarchy must deal with guiding the eye on the page so that it attends to different design elements in order of their importance (Gordon). Balance refers to satisfying arrangement or proportion of design elements (Gordon). Contrast provides the eye with noticeable difference between objects in order to emphasize that they are distinct (Gordon). Gestalt Principles captures our tendency to perceive the whole as opposed to the individual elements (Gordon). The end result of using these five principles will produce, an increase in usability for the user, provoke emotion and delight to the user and strengthen brand perception (Gordon).

UX designers have a tough task at hand, as they must understand both their users and their colleagues. To more easily understand these groups of people, empathy maps are used. Empathy maps are divided into four different sections: says, thinks, does, feels. While traditionally it is only applied to a user, we can also include designers for these empathy maps. Empathy maps visualize each of their respective sections. Says includes the words spoken by the user. Thinks includes aspects that users are definitely aware of, but too polite to speak out about. Does includes actions performed by the user, and feels include the user’s emotions. While these categories may seem to occasionally blend together, they aren’t meant to be perfect.

Empathy maps can be about one specific user, or a group of users. These group maps are formed from surveys and other types of data. Empathy maps, if implemented early on, can provide crucial data for the design process. By keeping the words, thoughts, actions and emotions of the user in mind when making choices, there will no doubt be some sense of consistency with your design. Not only that, but these descriptors create a goal and image to keep in mind when making important design decisions.

Source:

Gibbons, Sarah. “Empathy Mapping: The First Step in Design Thinking.” Nielsen Norman Group, 14 Jan. 2018, www.nngroup.com/articles/empathy-mapping/.

The article gave the definition of service blue printing. A service blueprint is “a diagram that visualizes the relationship between different service components that are directly tied to touch points in a specific customer journey.” The article refers to the service blueprint as being a tool that is typically used to help the employee have a positive experience when completing the tasks required of them. The article then goes into discussing weaknesses the blueprint can help find. For example, it states that the blueprint can help one finds weaknesses in the operation of the site. It can also help improve the employee production and effort in creating a plan for said employee to use to create the optimum experience. The article then begins to discuss primary and secondary actions that are part of the blueprint. These actions include customer interactions, frontstage actions, backstage actions, processes, arrows, time, regulations of policy, emotion, and metrics.

References
Gibbons, Sarah. Service Blueprints: Definition . 27 August 2017. Document . 2 March 2020.

Gibbons, Sarah. “Empathy Mapping: The First Step in Design Thinking.” Nielson Norman Group. January 14, 2018. https://www.nngroup.com/articles/empathy-mapping/. Accessed 2 March 2020.

Empathy mapping is a technique that is used by designers to articulate the type of user in order to create shared understanding and have better decision-making processes.  Empathy mapping typically consists of four parts: says, thinks, does, feels.  All of these parts surround the center, the user.  The “says” quadrant is what the user says aloud and usually contains direct quotes.  The “thinks” quadrant encompasses what the user thinks about their experience.  The “does” quadrant is how the user interacts with the page.  Finally, the “feels” quadrant is expresses the user’s emotions while interacting with the site.  This map is not always clear-cut because users experience a wide range of complex emotions and reactions, so it is common to have overlap in the quadrants or even discrepancies.  Empathy maps can be created for individuals as well as an aggregation of multiple users, which represent a “user segment, rather than one particular user.”  They should be made to prioritize the users’ needs and are central for a user-based experience.  The process of making one can be broken down into six steps, but the main idea is to define the goals of it, collect evidence and analyze it, which will allow the user to have a shared experience in the end.

In this article, Sarah Gibbons describes the process of creating a Journey Map and the parts it comprises. First, she defines it as a UX tool that gives the user a visual guideline or process that has an overall goal. To start the creation of this map, designers begin by congregating actions that the user takes into a specific order. Then, this timeline will include the customer’s thoughts and emotions about the product that make a narrative. This diagram states the user, scenario and goal at the top, three phases composed of the user’s thoughts and emotions, and overall insight at the bottom. The first important component of a journey map is the actor, or user, that is going through their “journey,” where each map is dedicated to one client. The next component is the scenario, where the map describes the certain situation intertwined with the user’s goal for using the product. Then, there are the journey or high-level phases specific to the organization that give structure to the user’s thoughts and feelings. These actions, steps taken by the user, emotions, up and down experiences, and mindsets, which are the user’s thoughts and questions, are also incorporated into the journey map. Lastly, the opportunities are what information the organization has gained from the UX from the journey map. A variation of this tool is an experience map, where the components are for a more general UX to understand normal human behavior. Another would be the service blueprint, which focuses more on the business instead of the user. The last one mentioned was the user story map, which is a more visual and is typically summarized in a single sentence. Journey maps in any form are useful to UI designers because they offer a visual guideline and place to gather all customer insight in one place so that the whole design to can make decisions.

Source

Gibbons, Sarah. “Journey Mapping 101.” Nielsen Norman Group, Nielson Norman Group, 9 Jan. 2012, https://www.nngroup.com/articles/journey-mapping-101/.

Laubheimer, Page. “Drag–and–Drop: How to Design for Ease of Use.” Nielsen Norman Group, Nielson Norman Group, 23 Feb. 2020, www.nngroup.com/articles/drag-drop/.

Drag-and-drop is a type manipulation that is used for grouping together, moving around, or resizing objects on a page. Some benefits of this manipulation that it user gestural interaction by making the actions visible, improving the overall usability. A downside to drag-and-drop is that at times, precision and efficiency can be lacking at times. For example, a user can drag and drop an item in the wrong space or lose the item that was dragged due to the distance on the page, making the user have to repeat the action potentially multiple times. In terms of the accessibility of the drag and drop, there are two types of visual icons that show an item’s specific action: grab-handle icons, which provide a target to click then drag and drop, and hover-state cursor changes which shows that clicking an item will allow the user to grab then drag and drop/release the said item. Feedback is an indicator to show that an object was grabbed and/or preview what it will look like once the user drops it, all to minimize mistakes. Features in drag and drop such as magnetism exist by making the drop area of the drag and drop feature a bit bigger, allowing users to “snap” objects into place (Laubheimer).