Be Mobile First

mobile user

Most people are searching, at least via Google, using a mobile device. Still, many people and many ranking systems, and even some designers typically look at the desktop version of a site as the main or perhaps the best version. This can be a problem.

Pages and entire sites can look great on that designer’s 30-inch monitor but fall short on that smartphone. It is a problem for ranking sites, like Google search, which admits that when the mobile version of a page has less content than the desktop page their algorithms are not evaluating the actual page that is seen by a mobile searcher.

They have been trying out ways to make results more mobile-first for the past 5 years or so. I know that Google tells me about issues with sites and many of those issues are about mobile views. The Google Search Console will be primarily using the mobile version of a site’s content to rank pages from that site. That means you need to have a mobile-first mindset.

A UX Intro

I was looking through some materials I used in teaching a course that included a unit on UX. The user experience is abbreviated as both UX and UE (which somehow in itself seems like a bad user experience). UX is how a user interacts with and experiences a product, system, or service. In that course, I had students looking at the UX of websites, but it can be applied to many other tech and non-tech instances.

Basically, you look at a person’s perceptions of the ease of use, and efficiency of a site. Companies are obviously interested in that and so designers need to use it in the creation process.

It seems odd that although the questions asked of users seem very subjective, the attributes that make up the user experience are objective.

Here are several basic terms used in UX.

Affordance – is one of the concept features that measures how well a user understands a feature without knowing how to use it. An example on a webpage or an object would be that something that need to be pushed or clicked looks like a button that should be pushed.

A/B testing – a controlled experiment for comparing two versions of the design. For example, you might present two color palettes of the same webpage design to determine if the colors make any significant change to a user.

Wireframes –  a simplified representation of your website or application consisting of just lines and text that can be hand-drawn or electronic and in this early stage true visual design and color are not presented.

wireframe for a user profile page

Mockup – is a richer visual version than a wireframe, including graphics, layout, and style. For products, these can be actual objects that users can hold or see as 3D objects.

Prototypes – are a further step toward the final product or website. This version can be responsive and there may be website items to click or enter data. They usually contain images and content such as text. Product prototypes can be physical objects, but a plastic or metal object might be made from paper or even just a 3D digital version. Technically, wireframes are prototypes but they are “low fidelity” and lack details.

Accessibility is something that is unfortunately too often overlooked. The common perception is that it is about users with disabilities, but that is too limited. Many users have “special needs.” Blindness would certainly be an accessibility issue but so would color blindness. A website designed for desktop users can present accessibility issues for all users if used on a smartphone.

There are many other terms used. The collection and analysis of UX data is itself an entire unit of study that would include things like clickstreams, diary studies, eye tracking, heat maps and card sorting.