Designing for Web with UX in Mind

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

What we are able to do today is: “Design User Experiences” on the web, just up ’til recently much of this was not possible because we had a lot of technological and browser related limitations. But today design of a website become complete experience design, controlling the pathways, user personas and funneling the users thru carefully crafted experiences. Improving a user’s satisfaction when interacting with a websites 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 the recant 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 mobile web in mind! For many mobile 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 recant studies, people use mobile phones and tablets more than desktop computers to gather information online, shop and entertain. When planning a web site 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 a bad user experience. Since less data can be viewed on the screen, structure the data inteligently, place the most important data towards a 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 can often be forgotten when designing a web site, but is quite 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 eye pleasing typeface, colors, and layouts? All of these elements directly effect look and feel as well as a branding aspect of the site. So 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.