Most people interact with the Internet on a daily basis, but not everyone experiences the Web in the same way or for the same reasons.
One user may jump online to shop, another to connect with friends (or strangers) on social media, others to stay up-to-date on the news and other trending topics. Some prefer to access sites on their smartphones or mobile devices, while others use laptops or desktop computers.
Some users will have the latest devices with all the most current technology, while others remain beholden to their favorite devices that may not include the most relevant features.
This variety of user activity makes UX design essential, but also challenging. You need to be able to design a consistent experience for people with different motivations, devices and technological capabilities.
In order to ensure the UX of your website is just as good (if not better) than everyone else’s, there are a few key components you should consider during the design process.
“Information Architecture” (IA) is the structural design of your site’s information hierarchy – your navigation, sitemap, homepage, categories, and so on. It helps you answer the question, “Is our site structured in a way that anyone can navigate it, no matter what device or browser they’re using?”
One of the biggest components of IA is navigation. Will a top-level navigation menu help customers find what they’re looking for faster than sidebar navigation? Should you include dropdowns? If so, how should those dropdowns be ordered – in terms of importance to the user or based on your sitemap?
IA strategy is about more than just knowing where certain elements on a landing page go. It’s also about how those elements impact the perception of your brand, the ease of navigation, the impact on design, and the positive (or negative) emotional response a user has to your site.
IA is the overarching plan that says, “We’re putting these elements in these specific places, and here’s why…” Without it, users may miss out on important information, may become lost on your site, or even click away due to confusion. (UX Booth has a great beginner’s guide to IA here.)
While Information Architecture tells you how a user interacts with your site in terms of where they find information, Interaction Design deals with specific interactions between users, their screens and your website.
Interaction Design is comprised of things like interface interactions – How users interact with the interface (depending on their device), what actions they can do with their mouse, finger or stylus and what elements they can interact with – and feedback responses – How long between an action does the website take to respond and how does a user know their action has been successful?
Unlike visual design, which is about how the user responds to visual elements like branding, graphics, images and fonts, Interaction Design focuses on the response to actions taken on the site. Without it, you may have a beautiful site with which no one wants to actually interact.
Visual Design is equally important to UX as well. It tells you how various design elements impact user behavior – how appearances (color, shape, size, etc.) impact interaction.
If you use the color red for your lead magnet button, for example, will it get more clicks? Will using a large, bold font create a sense of urgency? If you place your CTA at the top of the page, will it convert better? If you put a smiling person as your website header, will you have a more positive response to your brand?
Visual Design is about more than just image choices, however. According to UX Booth, it should be thought of “as a mix between graphic design and user experience design.” While graphic design focuses on static images and visuals, Visual Design incorporates Interaction Design to bring the whole picture together.
The topic of Visual Design can be polarizing for many designers, as some feel that focusing too much on aesthetics over usability can actually harm a site’s UX. But without Visual Design, users won’t have much of an experience at all. Finding a balance between visual appeal and function is key.
Usability – sometimes labeled “user-friendliness” – combines elements from Information Architecture, Interaction Design and Visual Design in addition to other functions like site speed to answer the question, “How easy is this site to use?”
It includes the simplicity of decision-making as well: Do users know where to get the information they want on their first visit to the site? Is information chunked enough so that they can remember it if they navigate away from the page? How likely are they to click a conversion button or to interact with the company in some way?
Usability also deals with the way sites handle errors and how users are directed if an error or mistake occurs. Are they notified if something goes wrong or a page doesn’t load properly? Does that error message direct them somewhere else or are they left on their own?
You can measure usability throughout the development process before the site is even built, using wireframes to prototype the final result, but usability testing should happen once the site is launched, too. The more usability feedback you receive from users once the site is launched, the better your UX will be.
Speaking of prototyping, creating a mockup or simulation of the site before it’s developed is another key component of UX that many designers overlook. Prototyping offers a cheap and flexible way to test the look, usability and interactive elements of a site before its launch.
Prototypes can range from highly polished or near-finished (called “high fidelity” prototypes) to simple sketches on the back of a napkin (low fidelity).
Designer Arijit Banerjee from UX Magazine believes that designers should start with a low-fidelity prototype and move up from there, noting that “as long as a prototype simulates the desired interaction flow and feel of the product, I’m good. Elements like visual design can take a back seat for the moment. And, to be fair, it takes less time and effort to build low-fidelity prototypes compared to their hi-fidelity counterparts.”
There are several tools that can be used for building prototypes as well, ranging from pen and paper to more advanced tools like Adobe Fireworks, but the point of a prototype is to bring all of the elements of UX together to test them accordingly.
Without a preliminary mockup, you risk missing key components of UX that may impact the final result.
Designing for UX goes beyond making a beautiful site – it’s about creating a site that appeals to users visually as well as functionally, and allows them to interact with it in a variety of ways.
Users should be able to view your site from multiple devices and perform multiple actions if necessary (swipes on mobile devices, mouse clicks on desktops, etc.), but they should also know which actions will lead them to their desired results.
UX incorporates motivation as well as usability. Users should understand where to go to get the information they need and how to get there quickly and easily. Good UX design allows them to browse with minimal effort and maximum autonomy.