AI generated design will need human centered usability testing
Human usability testing is an important step in the design process for any website, and it is especially important when it comes to artificial intelligence (AI)-generated web design. This is because AI-generated design can sometimes produce results that are unexpected or that do not meet the needs and expectations of users,
Usability testing allows designers to gather feedback from real users about the usability and effectiveness of a website or application. This can help identify any issues or areas for improvement, and ultimately lead to a better user experience and website that pay dividends.
When conducting usability testing for an AI-generated web design, it is important to consider the human factor. Peoples needs have to be taken into account and any pain points that are identified, need to be resolved with solid design.
You need to set clear goals and objectives for the usability testing. It is important to have a clear understanding of what you want to achieve with the usability testing. This could include identifying any issues with the AI-generated design, or gathering feedback on specific aspects of the design. some examples could be color contrast issues for accessibility that AI can’t identify.
It is important to select participants who are representative of your target audience. This will help ensure that the feedback you receive is relevant to the users who will be using the website or application. Be sure that the design is accessible. Be certain that design elements are usable by a screen reader.
There are many different methods for conducting usability testing, including focus groups, user interviews, and usability testing sessions. AI can’t speak to people during testing. It can’t empathize when a pain point is encountered or read the emotions on a persons face when they complete a task or fail. Be sure to use a combination of methods to get a well-rounded understanding of user needs and preferences. This includes 1. interviews and 2. surveys. Both methods are valuable and appropriate depending on the goal of the usability testing.
After the usability testing is complete, it is important to carefully analyze the feedback and identify any areas for improvement. This could involve making changes to the AI-generated design or incorporating additional features or functionality to better meet the needs of users. Be certain that any colors used in the design are compatible with users that may have disabilities and be sure to test.
Human usability testing is an essential step in the design process for AI-generated web design. It helps identify any issues or areas for improvement and ultimately leads to a better user experience.
When thinking of designing from scratch or re-designing an existing website, there are a number of important steps and stages that take place. This post will address those steps below.
Mission statement
is what your website offers to its users of and how they will benefit from it. It is important to have a clear mission statement so that you as the owner know what you’re offering your users and you don’t stray from the objective.
Conduct Interviews
Conversing with stakeholders implies
that you want to be certain that everyone involved with the website has the
same goal in mind. A meeting with all involved voicing opinions and jotting
down needs will help to gather the information needed to see that all involved
have had there say and can sign-off on a final agreement.
Personas
Personas are graphical representations that allow you to
understand who you are designing for. They provide representation of your key
audience segments for reference. They help to focus decisions surrounding site
components by adding a layer of realism to the conversation. More information
on personas found here: https://www.usability.gov/how-to-and-tools/methods/personas.html
User Flows
User Flows are a series of steps a user takes to achieve a meaningful goal (see figure 1). It
includes all the pages and interactions on the website taken, to reach that
goal. They aid in quickening the rate of iterations and improve communication
for all team members. Most importantly, they help guide users through the site
towards a goal you want them to take without getting lost along the way.
Figure 1 example of an e-commerce transaction user flow.
Analytics
Website traffic statistics are crucial in detecting the health of your
website and what areas can be improved. Tools like Google Analytics (free)
track the traffic on a website and provide insight on how people are using or
not using your site. By viewing metrics like page entry, page exit, and how far
into a site a user advances you can detect pain points in a user journey to
fulfill a goal. By fixing the mistakes on your site you improve the overall
usefulness and success of your website. And who doesn’t want that? More information
can be found here: https://analytics.google.com/analytics/web/#/report-home
Content Inventory can be used at the beginning of a Web site redesign process. They indicate what pages already exist on a website.
Sitemap
Not to be confused with the sitemap that is linked to in a footer and used by search bots for indexing a website for page links. The sitemaps goal (figure 2) is to convey a sites structure and hierarchy. Sitemaps allow the visualization of how different page types are distributed and linked together throughout a site or application. They can also indicate how a series of nodes would indicate a user path to perform a task. If not included, you can miss gaps where pages are disassociated with the existing website. More information can be found here: https://www.viget.com/articles/ux-101-the-site-map/
Figure 2 an example of sitemap.
Wire Frames
Wire Frames are low-fi drawings or simplified outlines and are a foundation of a project layout that aids in creating the design of a website. They allow for quick additions and fixes to existing site structure. They can be used to simulate how a user journey would interact with various elements within the sites structure.
Figure 3 represents an example of a wireframe.
Mock-Ups
Mock-ups are like the skin of
the website. Mock-ups are strictly visual. This is the documentation where you
solidify your visual decisions, experiment with variations, and (optionally)
create pixel-perfect drafts. Their intended use is to be handed off to front-end
coder to create an html template that can be used by a developer for functional
application (angular, php etc.) coding to be applied.
Build on development environment using the design mock-ups a front-end developer will create a template that can be used to create a functional web page that is used throughout the site build. Create as many template pages needed to accommodate the different type of output pages required for the application.
Work out bugs with the newly developed pages and confirm accessibility support and validate the template pages in a validator. The website shouldn’t launch until all compliance errors are remediated.
User Testing
Setup a User testing program in order to find out how the user will be able to use the website. The test should consist of 10 to 15 questions. the user will follow these questions as they go through the application. Questions should request an action/task from a user who would then provide feedback based on the outcome.
Test group of 5 people based on the personas find 5 people that will
qualify as a user for the website/application. The should sign a waiver and there
should be a test person present to help with any issues and to assure that the
questions are answered accordingly.
Compile Data
Compile data – fix – test again. After
the test results have been compiled, completed and
studied, the results should provide an overview of what
might be issues with the website. It will provide insight in any blockages or
bottlenecks that occur. They need to be rectified before the site can be moved
to production.
Move to Production
Move to production- iterate – check analytics – make changes phase 2 launch – continue. Now that all issues are resolved, and the site is in production, the site needs to be monitored for effectiveness. Analytics should be in place and used to find out how the site is being used. Another test group should be acquired for another round of testing. Use the test results to fix issues and reiterate again 3-6 months down the road.
It is the satisfaction someone gets from using a product, more specifically a website or app for our purposes.
Do you have a current website that is in need of an update? Take a look at it and try to find out how you can make it better for your users. Put yourself into there position and try to see if improvements can be made. Some of the questions you can ask yourself are:
how easy is the site to use/navigate?
can you find information that is required?
did you encounter any problems using the website?
would you use the website again?
any recommendations on how to improve the user experience?
Information Architecture:
the overall organization of navigation and content on a website or user iinterface. It is a logical pattern of elements eg) Nav, breadcrumb, sidebar menu, footer menu
Interaction Design:
The overall experience moving through a series of actions/tasks on a website. eg) A user completes a series of tasks of inputting information into a form which updates a database. The amount of steps it takes before a user completes a “call to action” such as, signing up for a newsletter or buying an item from your website.
Separating Visual Design:
The overall look and feel of the website including elements pictures, colors, textures etc. Of all ofthese elements are used to complete the design of the UI and how it can affect the user experience. eg) a webpage that has poor contrast for readability like green text on a black background. Tools like WebAim can help with testing contrast.
Testing the Ui:
Find a group of users that fit your target market. Information from the group will provide an indepth view from UI/UX. Testing is ongoing and iterative. Watch them as they go through the UI and record any issues, questions or concerns they have regarding the interface. Ask questions specific to the goals that you want your app to accomplish. This will help you when designing and save you from having to fix and redo the design.
Tools for gathering metrics include PIWIK, KISS Metrics, Google analytics. It is free and can provide a multitude of information like where are your users coming from. What entry pages. How long are they staying for? How far are they moving into the site? What is the bounce rate? What is the browser and version. What OS, device type and screen resolution?
All of this information is valuable and should be used when improving the UI for your design.
Remember, it’s not about you, its about your users.
