At its core, the role of a UX professional is to empathize with the people who interact with your product. When you think about it in those terms, it is not unreasonable to expect that everyone involved in the creation of a website should be UX evangelists – from the client to the developer and everyone in between. After all, while we are contracted to plan, design and develop a site for the client, we are really creating an experience for the user. If that focus is lost (or if it was never present), projects can easily go awry.
The best way to gain an appreciation and deeper understanding of your user’s behavior is to conduct research. For many web design agencies and clients, that is often not feasible due to budget and timing constraints. But that doesn’t mean we should default to personal preference when making UX decisions. The client will likely have existing analytics data to gain insights from, or sales data or a target audience profile, and it is our job to ask for this type of information at the beginning of a project.
Regardless of how much or little data exists, we should be asking ourselves, “who am I designing this site for?” or “who am I building this contact form for?” or “in what context is the user likely to be consuming this site’s content?” Perhaps your personal preference does align with user behavior, but asking yourself those questions throughout the process is the most important step in empathizing with the end user.
Now that responsive web design is web design, we should be planning, designing and developing device agnostic experiences. The impending emergence of wearables makes that abundantly clear. That being said, we do need to be cognizant of device capabilities and limitations. Doing so will enable us to build richer experiences, and more importantly, avoid force fitting personal preference or established “desktop” behaviors and conventions onto non-desktop devices. The following UX considerations are those that we often encounter, and as such, run the risk of defaulting to a preconceived “norm”.
Increasing Size of Phones
According to research conducted by UX Matters, 49% of people primarily hold their phone with one hand, 36% cradle, and 15% hold with two hands. Those numbers are likely to shift as the screen size of phones continues to increase, and as a result, we should always be aware of the placement of critical elements, such as the navigation. It is common to see the the “hamburger” icon in the top right corner of a site on mobile, but we must question if that is difficult to reach for users who primarily use their thumbs. My suspicion is that navigation fixed to the bottom of the screen will become more common in the near future, but the only way to determine if that design pattern is right for your site is to test early and often.
Keep Performance Top of Mind
Labeling performance as a UX consideration may seem out of place, but serving a lighter site to mobile devices is critical for a positive user experience. Many of us enjoy lightening fast connections, but that is not the case for everyone – especially if you are trying to reach a global audience. Spend a day on a 3G connection to see how much of the world experiences the internet. It won’t take long before you have second thoughts about serving up that 1MB hero image to small screens.
The topic of performance is too broad and complex to do justice to in this post, but the point is, being performance-minded is vital to being truly empathetic to your users.
Responsive Images
Now that the <picture> element and the srcset attribute are a reality, serving appropriately-sized images relative to viewport size, or 2x images to a high pixel density screen, is easier than ever. That’s great. The hard part is determining how much is too much. Crisp, 2x images on a retina screen are beautiful, but they come at a cost. Testing is critical in this respect – I’ve often found that the visual difference between a 1.5x and 2x image on a 2x device is negligible, but the difference in weight is significant. Compare weight vs quality vs size in different image formats. Save jpgs as progressive in Photoshop for greater perceived performance. Consider setting a performance budget to keep your page weight in check. Until we are able to detect variables such as connectivity and data availability, finding the right balance between image quality and performance requires a pragmatic approach.
Hover Interactions
Lack of mouseover support on touch devices makes relying on hover interactions for critical design elements a risky proposition. Many sites designed for desktop fail on mobile because this dynamic was left as an afterthought. Be cognizant of how hover is used, and how to handle on touch. There are many different approaches, including this one by a fellow King Design developer.
Zoom on Touch Devices
Adding maximum-scale=1.0 to the meta viewport tag disables zoom on touch devices. This is something that is seen frequently, and there are probably legitimate use cases for doing so, but it is taking control (and a default browser behavior) out of the user’s hands. The A11Y Project considers this a bad practice for accessibility, and it’s easy to understand why. A user may need to zoom for closer inspection of an image, to make it easier to copy a section of text, or maybe they just have a hard time reading your 14px font. Whatever the use case may be for disabling zoom, you must consider that you are forcing users to view your site a certain way – and in many cases that may be less than optimal.
Adequately Sized Touch Targets
This one should be a no-brainer. Make your touch targets big enough for fat thumbs – 44 x 44px is a good guideline, but nothing beats device testing.
Touch to Call
Most sites list a phone number on the contact page, in the footer, etc. Take advantage of touch to call capability on mobile devices by adding the tel protocol to a linked phone number. On a desktop screen, this will still display as a link, which may not be desirable. In which case use CSS to mask that it is a link, or hide the link and display the phone number in the content property of the :before pseudo element.
(555) 555-5555
In Conclusion
In discussing these design patterns and interactions, the point is not to advocate a particular approach, but rather to encourage a greater degree of empathy throughout the web design process. This not only results in a better experience for our users, but makes us better designers and developers.
