Designing for Web with User Experience in Mind

I’ll go in basics here so please bear with me. I received UI/UX questions from some folks another day on designing experiences so I wanted to cover it in the form of the post as well.

What we are able to do today is: “Design User Experiences” on the web, just up until recently much of this was not possible because we had a lot of technological and browser related limitations.

But today’s technologies allow for web design to be focused on experience design, controlling the pathways, user personas, and funneling the users thru carefully crafted experiences. Improving a user’s satisfaction when interacting with a website is part of the user experience design or UX design. There are a few standards that we follow to make a site visually appealing, easy to navigate, accessible, and usable.

Plenty of CSS frameworks have been created in recent years to help make a website look clean but also accessible. We’ve been using Bootstrap a lot, but there are plenty of others that can be found to fulfill the project needs. Making sure the framework is responsive (which most frameworks nowadays are), meaning it will accommodate any screen size, by scaling the content accordingly. These frameworks with a little bit of aesthetic “magic” can help assure a good UI/UX design on all modern browsers – both desktop and mobile.

Always keep the mobile web in mind! For many people mobile access, it is not only a 1st choice but the only choice. The transition in user behaviors and current technology improvements moved us in this direction. According to all recent studies, people across the globe use mobile phones and tablets more than desktop computers to gather information online, shop, and entertain.

When planning a website redesign, consider that many mobile devices do not handle well heavy pages. Also, heavy pages may annoy users who are using a slower mobile network or who have limited data plans. So keeping the content lean and purposely structured is one of the most important things.

Screen size should also be considered. Less data fits on a smaller screen, but don’t underdo it. Reading two sentences and then having to click a link to another page to read the next two sentences can lead to bad user experience. Since fewer data can be viewed on the screen, structure the data intelligently, place the most important data towards the top of the screen.

One last thing to consider regarding mobile devices is what content to include or exclude. Many designers have excluded content from their mobile version of their website that can be found on the desktop version. This is typically not good practice. Use consistent content across all devices so people can get what they are looking for. Don’t assume to know the user’s intent.

Accessibility is often be forgotten when designing a website but is quite an important part of the user experience design. Red and green can often be difficult for a color impaired person to tell apart.

Eight percent of males have a color vision impairment. There are tools that can help you design your site so the color impaired can view it, such as Color Oracle.

Users who use screen readers to view your web page won’t be able to view images and videos on your site, so label them with an alt-text tag. Use of descriptive text that allows the user to know where the image is.

So, you have a responsive, accessible web site that is functional on all devices and browsers. But how does it look? Did you choose an eye-pleasing typeface, colors, and layouts? All of these elements directly affect look and feel as well as a branding aspect of the site. Choosing photography and typography for a site that would reflect your brand, your corporate culture, and work hand in hand with your media and marketing efforts on emotionally engaging the users.

Photos by You X Ventures on Unsplash