Wireframing is an essential skill for anyone working on a project with a user interface. The purpose of a wireframe is to help visualize an application or feature before writing any code and to consider the user journey (and user experience) early on in the development process. Since wireframes are much simpler than actual front-end code, they are a great tool for planning and reworking designs before setting anything in stone. Common applications used for wireframing are Figma and Adobe XD. For this module, we'll focus on Figma.
Usability is all about the core functions of your application or feature. Your design should support all the features of the product you're trying to build and, ideally, be flexible enough that you can add new features. For example, if you're building an application that allows users to order food, you would need to include a checkout page in your wireframe and a path to navigate to that page.
Beyond simply including the features in your wireframe, you'll also want them to intuitive and easy to navigate to. Think about the icons you'll use, the colors you'll incorporate, the placements of components, and the [user flow](https://www.optimizely.com/optimization-glossary/user-flow/#:~:text=User flow is the path,such as purchasing a product.). Think about how the user will interpret certain symbols, how components will look on different devices and in different lighting, and where users will look to accomplish a certain task (e.g. we typically expect to find the submit button at the bottom of a form). Wireframing and UI/UX are all about the user so be sure to keep them in mind when creating your design and when in doubt, ask for feedback!
Here are some examples of effective and ineffective designs. See if you can spot the issues and think about what you would do to fix them.
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FGBU43TGRprJK6kVlgHPlXM%2FPM-Wireframing-Module%3Fnode-id%3D0%253A1
Question 1: Look at Frame 1 and Frame 2. Which design seems more intuitive/easy to use?
Accessibility is all about catering to a wider audience. Think about the different needs that your product should be able to address; this could be anything from sensory impairments to cultural differences. Accessible design is less about choosing which features to include and more about choosing how to include each feature.
When creating an accessible design, it's good to start with the overall look and feel of the app and then work your way in to individual components. For example, we can start our wireframe by choosing the typeface(s) and font sizes for all of our text components before we actually start inputting headings or body text. Typefaces (font design) should be simple and easy to read, and even the smallest font size should be legible. Websites and apps tend to use [sans-serif](https://www.freecodecamp.org/news/how-typography-determines-readability-serif-vs-sans-serif-and-how-to-combine-fonts-629a51ad8cce/#:~:text=The typeface Serif is differentiated,actually because of stone carving.), rather than serif or slab-serif, typefaces because they are easier to read on screens.
When beginning to design individual components, you should also think about how you'll differentiate between foreground and background, positive and negative actions, and different selections/regions. You should try to include at least 1-2 differentiators for each of your components to help users determine what elements they are interacting with and prevent design failures. One of the best tools a UI/UX designer has in their toolbox is contrast. Contrast is most commonly used to separate text from its background and is extremely important in improving readability. Similar to contrast, color in general is also used to differentiate between components, but often these components are on the same "plane." Color and contrast can help key components pop out and provide some details about the result of an action (e.g. red is often associated with deletion). However, you should always keep in mind people with visual impairments and/or color deficiencies (e.g. red-green color blindness) when finalizing your design. As mentioned earlier, you should always use at least one strategy to differentiate between components (preferably 2+, but don't go overboard) to allow a variety of users to interact with your designs easily and as intended.
The last two important, but less prevalent, design issues that you should take into consideration are cross-compatibility and cultural accessibility. Cross-compatibility means that the application should work on a variety of devices. From a design perspective, this means that you should optimize your wireframes to take advantage of the dimensions and inputs (e.g. mouse vs touchscreen) of different devices. For example, this may mean that a menu bar appears horizontal on a laptop, but vertical on a phone so it remains legible. Cultural accessibility is all about designing for people whose backgrounds may be different from your own (while remembering who your users are). You should be cognizant of how the symbols and verbiage that you use will be interpreted by others. For example, if you want to include an icon representing food, 🍕 may be a better choice than 🥑 because pizzas are a more popular food item, meaning more people will associate pizza with food than an avocado.
Here are some examples of accessible and inaccessible designs. See if you can spot the issues and think about what you would do to fix them.
https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FGBU43TGRprJK6kVlgHPlXM%2FPM-Wireframing-Module%3Fnode-id%3D1%253A6
Question 2: Look at Frame 1 and Frame 2. Which design is more accessible?
Continuity is more about aesthetic than function, but lack of continuity can certainly inhibit function and easy of use. You can think of continuity in two ways: intra-product on inter-product. The former focuses on the designs you use within your app whereas the latter considers how your app will fit into a broader ecosystem of product. When designing an application think about the emotions, thoughts, and actions you're trying to invoke in the user while staying true to the overall brand of the company/organization.