User Experience Overview
User Experience Overview
One of the requirements outlined in the NSTIC Strategy document was that once an identity ecosystem is structured, it should be cost effective and easy to use. The system should be simple to understand, intuitive, require a minimum of training for users, it should be accessible to disadvantaged and/or disabled individuals and all should be able to switch services easily within the ecosystem. To help understand what this means from a user experience/usability perspective we have drawn this overview from the U.S. Department of Health and Human Services website usability.gov (http://www.usability.gov) . There you can find more expansive discussions of the topics in this overview.
To assist those new to the User Experience perspective, the IDESG User Experience Group has gathered a number of resources and guides which explain the perspectives and methodologies associated with this domain. These can be found within the IDESG Identirama wiki site at UXC_Resources”.
Scope
The user experience environment for this document is digital display devices with at least 480 x 960 pixels connected to a web server. This covers the environments described in the foundational document [[1]]. Future documents may address other user experience environments. While the specific contents of this document and its attachment are focused on web based interfaces, the overriding concepts may also be applied to the user activities of creating, managing and using an identity. Considerations for application of specific technologies and interfaces to specific operational requirements should be mindful of the diversity of needs of target participants and be respectful in designing programs to accommodate specific user needs which facilitate their participation in those circumstances.
User Experience Basics
User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. It also takes into account the business goals and objectives of the group managing the project. UX best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services.
Factors that Influence UX
At the core of UX is ensuring that users find value in what you are providing to them. Peter Morville represents this through his User Experience Honeycomb [[2]].
He notes that in order for there to be a meaningful and valuable user experience, information must be:
- Useful: Your content should be original and fulfill a need
- Usable: Site must be easy to use
- Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation
- Findable: Content needs to be navigable and locatable onsite and offsite
- Accessible: Content needs to be accessible to people with disabilities
- Credible: Users must trust and believe what you tell them
For some, this model seems to presume that users are passive and have little or no role in the design requirements for a system. User experience literature, however, recommends as much interaction with prospective users as possible from the initial design through system testing and implementation, with post implementation surveys and other feedback to insure systems work as intended and that participant experiences are of sufficient quality to invite continued participation.
Similarly, recent experiences and news reports have heightened individuals’ perceptions of potential risks to their personal information. Concerns regarding manipulation and exploitation of this data have created an additional need for developers to build trust and protection mechanisms into systems that are easy for participants to understand and accept.
User Interface Design Basics
User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design[[3]], and information architecture[[4]].
Choosing Interface Elements
Users have become familiar with interface elements acting in a certain way, so developers should try to be consistent and predictable in their choices and their layout. Doing so will help with task completion, efficiency, and satisfaction. Interface elements include but are not limited to:
- Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
- Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
- Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
- Containers: accordion
There are times when multiple elements might be appropriate for displaying content. When this happens, it’s important to consider the trade-offs. For example, sometimes elements that can help save space put more of a burden on the user mentally by forcing them to guess what is within the dropdown or what the element might be.
Best Practices for Designing an Interface
Everything stems from knowing your users, including understanding their goals, skills, preferences, and tendencies. Once you know about your user, make sure to consider the following when designing an interface:
- Keep the interface simple. The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.
- Create consistency and use common UI elements. By using common elements in a UI, users feel more comfortable and are able to get things done more quickly. It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site.
- Be purposeful in page layout. Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.
- Strategically use color and texture. You can direct attention toward or redirect attention away from items using color, light, contrast, and texture to your advantage.
- Use typography to create hierarchy and clarity. Carefully consider how the use of typeface. Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and readability.
- Make sure that the system communicates what’s happening. Always inform users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and, if necessary, next steps can reduce frustration for the user.
- Think about the defaults. By carefully thinking about and anticipating the goals people bring to a site, in order to create defaults that reduce the burden on the user. This becomes particularly important when it comes to form design where there might be an opportunity to have some fields pre-chosen or filled out.
User Interface Elements
When designing an interface, try to be consistent and predictable in choices of interface elements. Whether they are aware of it or not, users have become familiar with elements acting in a certain way, so choosing to adopt those elements when appropriate will help with task completion, efficiency, and satisfaction. Interface elements include but are not limited to:
- Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field
- Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
- Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
- Containers: accordion
Input Controls
| Element | Description | Examples |
|---|---|---|
| Checkboxes | Checkboxes allow the user to select one or more options from a set. It is usually best to present checkboxes in a vertical list. More than one column is acceptable as well if the list is long enough that it might require scrolling or if comparison of terms might be necessary. | File:Overview-fig02.jpg |
| Radio buttons | Radio buttons are used to allow users to select one item at a time. | File:Overview-fig03.jpg |
| Dropdown lists | Dropdown lists allow users to select one item at a time, similarly to radio buttons, but are more compact allowing you to save space. Consider adding text to the field, such as ‘Select one’ to help the user recognize the necessary action. | File:Overview-fig04.jpg |
| List boxes | List boxes, like checkboxes, allow users to select a multiple items at a time, but are more compact and can support a longer list of options if needed. | File:Overview-fig05.jpg |
| Buttons | A button indicates an action upon touch and is typically labeled using text, an icon, or both. | File:Overview-fig06.jpg |
| Dropdown Button | The dropdown button consists of a button that when clicked displays a drop-down list of mutually exclusive items. | File:Overview-fig07.jpg |
| Toggles | A toggle button allows the user to change a setting between two states. They are most effective when the on/off states are visually distinct. | File:Overview-fig08.jpg |
| Text fields | Text fields allow users to enter text. It can allow either a single line or multiple lines of text. | File:Overview-fig09.jpg |
| Date and time pickers | A date picker allows users to select a date and/or time. By using the picker, the information is consistently formatted and input into the system. | File:Overview-fig10.jpg |
| Element | Description | Examples |
|---|---|---|
| Search Field | A search box allows users to enter a keyword or phrase (query) and submit it to search the index with the intention of getting back the most relevant results. Typically search fields are single-line text boxes and are often accompanied by a search button. | File:Overview-fig11.jpg |
| Breadcrumb | Breadcrumbs allow users to identify their current location within the system by providing a clickable trail of proceeding pages to navigate by. | File:Overview-fig12.jpg |
| Pagination | Pagination divides content up between pages, and allows users to skip between pages or go in order through the content. | File:Overview-fig13.jpg |
| Tags | Tags allow users to find content in the same category. Some tagging systems also allow users to apply their own tags to content by entering them into the system. | File:Overview-fig14.jpg |
| Sliders | A slider, also known as a track bar, allows users to set or adjust a value. When the user changes the value, it does not change the format of the interface or other info on the screen. | File:Overview-fig15.jpg |
| Icons | An icon is a simplified image serving as an intuitive symbol that is used to help users to navigate the system. Typically, icons are hyperlinked. | File:Overview-fig16.jpg |
| Image Carousel | Image carousels allow users to browse through a set of items and make a selection of one if they so choose. Typically, the images are hyperlinked. | File:Overview-fig17.jpg |
Information Components
| Element | Description | Examples |
|---|---|---|
| Notifications | A notification is an update message that announces something new for the user to see. Notifications are typically used to indicate items such as, the successful completion of a task, or an error or warning message. | File:Overview-fig18.jpg |
| Progress Bars | A progress bar indicates where a user is as they advance through a series of steps in a process. Typically, progress bars are not clickable. | File:Overview-fig19.jpg |
| Tool Tips | A tooltip allows a user to see hints when they hover over an item indicating the name or purpose of the item. | File:Overview-fig20.jpg |
| Message Boxes | A message box is a small window that provides information to users and requires them to take an action before they can move forward. | File:Overview-fig21.jpg |
| Modal Window (pop-up) | A modal window requires users to interact with it in some way before they can return to the system. | File:Overview-fig22.jpg |
Containers
| Element | Description | Examples |
|---|---|---|
| Accordion | An accordion is a vertically stacked list of items that utilizes show/ hides functionality. When a label is clicked, it expands the section showing the content within. There can have one or more items showing at a time and may have default states that reveal one or more sections without the user clicking | File:Overview-fig23.jpg |
