4. Desktop vs. Mobile UI/UX

Samantha Zumaran
4 min readFeb 20, 2021

--

The website that I will be focusing on for this week’s topic is the CDC website, which is a site that has become more prevalent in the lives of Americans for the past year than in the past. This site is accessed from many different types of users with varying backgrounds, education, beliefs, languages, etc., and from a variety of platforms. Considering this, it would be very important that this site be easily navigated and translated across many different types of devices, which I believe it has done a pretty decent job at doing so. There are countless accessible pages on this website, so for now I will focus on the homepage since it is where every user will begin their experience.

Mobile & Desktop Opening Views (left, middle) and Mobile Navigation Menu (right)

Pictured above is the top of the homepage for both the mobile (left) and desktop (middle) versions of the website. I think one of the key differences to note between these formats is how the mobile version has a stationary banner at the bottom of the screen that contains social media buttons that take you directly to their page. I think this is actually a very smart addition to create specifically for the mobile website but leave out on the desktop since most people access their social media apps through their phone rather than a laptop. Another glaring omission from the mobile site is a navigation tab, like the one featured on the desktop. Instead, these same navigation pages are found at the very bottom of the mobile view in a very plain, non-important display (right). At the very least, I think a collapsable side tab on the mobile site would have been a better solution since the user would have to scroll all the way to the bottom of their homepage just to be able to properly navigate the site similar to how they would on the desktop.

Mobile (left) and Desktop (right) articles, outbreaks, and news

The next set of pages contain featured articles, outbreak information, and upcoming news events. I think this information is translated fairly well between the two views, but it would be curious to see if some of this information could be more concentrated in the mobile view so that there isn’t so much scrolling. In the desktop version, the entire homepage can be viewed in about 4 complete pages, while the mobile version takes about 7–8 pages. Personally, some expandable menus on the home page with the different headings could solve this issue so that the user can simply click on whatever information they are looking for, very roughly like the image seen below.

Mobile Redesign example
CDC in Action, Mobile (left) and Desktop (right)
Science at CDC, Mobile (left) and Desktop (right)

The remaining comparisons of the mobile and desktop are fairly standard and uniform. The website itself on both the mobile and desktop versions contain an abundance of content and information, but I do find it much easier to read and follow on the desktop version. Some of the pages have a lot of dense reading, statistics, graphs, etc. that make the mobile viewing experience a little exhausting after a while. However, they do make the important information, particularly regarding COVID-19, very visible and accessible for users across all devices. For reference, the homepage for the CDC’s COVID-19 site is shown below in mobile (left) and desktop (right). In fact, I think the menu tab is a great specialized addition on the mobile site, and a similar adaptation for the homepage would make the mobile site much more cohesive.

CDC COVID-19 Homepage on Mobile (left) and Desktop (right)

Overall, it is very evident that the website is highly accessible on both mobile and desktop, but I do think some minor changes could make the user experience much easier and less exhaustive.

--

--

No responses yet