UX & UI For Responsive Web Applications
The User Experience (UX) and User Interface (UI) for web applications will vary greatly depending on the device used to access the site. For this reason, it’s important to begin with a responsive design. From there, you can customize the UX to match each device and select the UI that brings everything together.
Responsive web design
Take a moment to think back and recall the last 24 hours.
How many times did you flick your smartphone out of your pocket and look up a quick tidbit of information? This could have been the weather report, stock quotes, or simply a random bit of trivia you were discussing with a friend.
How many hours did you spend in front of a laptop or desktop computer browsing the web? Perhaps this was for work, or maybe it was just for pleasure.
Did you spend any time using a tablet computer during those 24 hours? If so, how long were you using that device and for what purpose?
Now that you have your last 24 hours of Internet activity in mind, consider the usage habits of the people you interacted with during that same period. How many of them were using their phones, tablets, and computer?
Each of these devices has a different operating system, different browser, different hardware, different screen size, and different Internet connection. However, it is expected that any website will should be able to load on any of these devices, and that is expected to happen quickly.
That’s the goal of responsive web design!
When configured properly, a website needs to quickly recognize the device being used to access the content hosted by the site. That content should be formatted and optimized for rapid and useful presentation on the device making the request.
For example, a website that looks great on a computer with a 22-inch monitor is impossible to use on a smartphone with a 4-inch touchscreen. The only way to keep people from bouncing right off the site is to reformat the content to fit within the dimension of the screen used to view it and the restrictions of the interface used to navigate the site.
Web application UX
When talking about the UX of a web application, this is in reference to the feel of the site.
- Does the user enjoy the presentation?
- Is the site easy to navigate?
- What does the user do when they arrive at the site?
- Where should the user go after they have consumed the information on the page they requested?
These are the questions a good user experience designer must address. More importantly, the UX will be different for each type of user, each device used to access the site, and each page on that site. This means you must create unique UX for smartphones, tablets, and desktop/laptop computers. Depending on your application, it may be a good idea to even design a unique UX for smart televisions and very large monitors.
Web application UI
Moving to the UI of a web application, we’re starting to consider the actual elements of the site.
- Navigation buttons
- Menu items
- Font sizes
- Content placement
All of these elements are included in the UI of a web application. Depending on the device being used to access the site, different methods of input are used. Interacting with a site using a keyboard and mouse is very different from using a touchscreen. Even within the realm of touchscreens, there is a big difference between using a 4-inch screen (like the one found on a smartphone) and a 10-inch screen (like the one found on a tablet). Each element of the UI for a web application must be selected to match with the device being used to access the site and the UX you’re trying to create.