Mobile UX (User Experience) Best Practices

Mobile is the key component of your digital asset portfolio. Mobile should not be an afterthought in UX design or any other digital effort. It should be prioritized in all phrases, strategic, design, and implementation. In fact, we encourage advertisers and marketers to adopt mobile first strategy. This means that we should create mobile user experiences first and then adept these for the web instead of the other way around, which is what we used to do. Designing this way has its advantages since the principles of good mobile UX work just as well on full websites.

They include simple designs, linear interfaces, and clear buttons and features. Mobile first also makes you focus on deciding which content is most essential. Mobile UX design is not without its challenges, though. In mobile, we have more device variation. It’s not just phones which vary a lot in and of themselves, but tablets, game consoles and the like. We also have to consider the users. Mobile users are using mobile sites differently than laptop or desktop users.

And then the device limitations also need to be taken into consideration. We have smaller screens, difficult inputs with touch screen keyboards, slow connection speeds, and slow O/S or hardware. A professional course would be a handy. We’ll discuss this more in the web development and design post, but for now, we just need to know that there are three main approaches to creating content accessible in a mobile user experience environment. Which are as follow below.

• Mobile websites
• Native and web applications
• Responsive websites

PRINCIPLES OF MOBILE UX

Let’s look at some of the universal core principles for mobile UX design.

SIMPLIFY

First, simplify, simplify, simplify. Show information only when it’s needed. While you should make sure you’re providing all of the information that the desktop site has, you have to present it in a format is more mobile friendly. Think about the weather channel example. The information was the same, but presented in a different way on the mobile screen shots you saw on the desktop version.

REDUCE LOADING TIME

Next, reduce your loading time by keeping content and actions on the same page. Don’t make users switch between pages to do action after reading the content. This helps us make sure that we have better performance as there are fewer page loads between that content and action.

ENCOURAGE EXPLORATION

Users like to browse and explore, particularly on touch screen. Mobile UX gives the user the feeling of being in control.

GIVE FEEDBACK

Make sure that it is clear when the user has completed an action. You can use animations of other visual cues to accomplish Mobile UX.

COMMUNICATE CONSTANTLY

You need to deliver the same message across all of your touch-points, including you digital touch-points, so you should use the same icons on the website as you would on the app. This prevents the users from having to learn how to interact with you each time they interact with a new digital asset.

PREDICT WHAT YOUR USER WANTS

And then, predict what your user wants are. This will come from usability research and watching what your users do, and then you can arrange things in your mobile UX to accommodate.

STEPS TO MOBILE UX DESIGN

So let’s take a look at a step-by-step approach to the UX design.

CONDUCT RESEARCH

First, in mobile UX, you have to conduct research and discover. Everything needs to be grounded in research and the insights coming out of that research. Your research should focus on the user, but should also include information on the business and the technology.

CREATE BASIC STRUCTURE

You should create the site’s basic mobile UX structure. Here you’re taking raw data, and making it manageable and navigable. This helps the user learn and understand what you are trying to communicate to them. Categories and pages should flow from the most broad, to more and more narrow. The more intuitively designed the structure is, the easier it is for the user to understand the site’s goals. You need to look at this from macro and micro level. The entire site architecture down to each page’s content.

ANALYZE CONTENT

The third step is let’s you to analyze content. If you’ve inherited a website or app, you should do a content audit. Look at the content that there is, and then analyze it. If you are creating a new digital asset, a website or app, you have to determine your content strategy. This is a plan that outlines what content is needed, and when and how it will be created.

CREATE SITEMAP

Next, create a sitemap for mobile ux. This is a structural plan or outline for how the website pages will be laid out and organized. Start with the Homepage, and what it contains. Then navigation flows from this. And, you arrange your pages of content below the navigation topics, and continue doing this until all of your content is included. Don’t forget your static information that’s on every page, footers, headers, search tools etc.

BUILD NAVIGATION

Now, it’s time to actually build the navigation. This helps the users to determine things like, where am I? How did I get here? Where can I go next? And how do I get to home? It’s essentially a road map for the user of your site.

CREATE LAYOUT

Next, move on in to creating a layout. Here we’re looking at four zones. The header, across the top of the page. The left sidebar, which is exactly what it sounds like. The central content and the right sidebar. Then we have the footer across the bottom of the page.

ASSEMBLE ADDITIONAL ELEMENTS

Of course there are other elements besides the main content that need to be included. So, we need to assemble this. They include things like forms, cause to action, search inputs, and other standard elements.

DESIGN VISUALS

Next, we will look at the actual design and the visuals. This is the first impression for the user, so it is utmost important. This should match to your overall mobile UX design, look and feel for marketing and branding. Things like color and imagery need to be considered carefully.

TEST

And of course, as is a benefit of digital, in particular, you can test the website, and make sure that you implement based on the results. Test as much as possible, as often as possible, and as early as possible. Then you are ready to launch!

UX DESIGN – UNDERSTANDINGPROS AND CONS

Have you ever visited a website that had confusing navigation, was hard to use, had too much text, or was otherwise unappealing? Or how about a website that was great, that worked really well, was pleasant to use, and was easy to navigate? Well, these are the extremes of user experience or UX design. A great UX design can help companies attract, services, and retain customers. On the other hand, a bad UX design can hurt the bottom line.

The UX design can be to hard to define, since its often a case of, you’ll know it. A website has to provide the information and functionality the user is looking for and must do so in an easy-to-use way. A website with great UX design goes further. It has to create an enjoyable experience and become worth sharing. To do this we must put the user’s wants and needs first in order to create a great UX design for them. This in turn leads to effective digital assets.

CATEGORIES OF UX DESIGN

The basics to online UX design can be divided into two broad categories:

FUNCTIONAL UX DESIGN

This incorporates the pieces of the user experience that relates to the use of website of or app. It includes things such as working technical elements, navigation, search and links.

CREATIVE UX DESIGN

This is the bigger, harder to define impression create by this website or app. In other words it is the WOW factor that links visual and creative elements of the tool. There are six qualities that make up good UX design.

SIX GOOD QUALITIES TO UX DESIGN

FIND-ABILITY

Can I find it easily, does it appear high-up in search results

ACCESSIBILITY

Can I use it when I need it. Does it work in my mobile phone or on a slow internet connection? Can people with disabilities use the site or app.

DESIRABILITY

Do I want to use it? Is it a pleasant experience, or do I dread logging in?

USABILITY

Is it easy to use? Are the tools I need intuitive and easy to find?

CREDIBILITY

Do I trust it? Is this website is legitimate?

USEFULNESS

Does it add value to me? Will I get something out of time I spent?

CORE PRINCIPLES FOR UX DESIGN

USER CENTRIC DESIGN

We often focus on creating the web platforms that we want, and think are best, instead of really finding out what the user wants or needs. Internal politics of a company, such as each department wanting a space that they can control on or just off of the home of a site, slows down the performance and hinders good design of a web asset. So how do we over come this? When designing for the user, you need to ask the following questions.

• Who is the user?
• What are the user’s wants and needs from your platform?
• Why is the user really coming to your website?
• What are the user’s capabilities, web skills, and available technology?
• What features would make the user’s experience easier and better?

The answers for these questions will come out of user research. This is even further complex because many users may not know exactly what are their wants and needs are.

UX DESIGN USABILITY

It is the UX designer job to discover these through research and interpret them in the best way possible. Lets take a closer look at the usability. Its about making the digital assets we built easy and intuitive to use. The paraphrase Stephen Krug, ‘don’t make your users think, they should just do.’ One of the important aspects of usability involves sticking to common rules or ways displaying or structure things on the web. Some of this include:

PROS

• Links that are blue and underlined, navigation menus at the top or left of the webpage.
• Logo in the top left hand corner, which is hyperlink to take user back to homepage.
• Search box placed at the top of the page, using standard wording such as Search, or magnifying glass icon.
• Ensure all website elements, such as menus, logos, color, and layout are distinct, easy to find and kept consistent throughout the site.

CONS

• Never resize windows or launch the site in a popup.
• Don’t use entry or splash pages, which is a page that site visitors encounter first before reaching the homepage. Let them get to the homepage right way.
• Never build a site entirely in Flash. Most search engine spiders cannot effectively crawl flash sites, and these will not work on many mobile devices.
• Don’t distract users with things like blinking images, flashing lights, automatic sound, scrolling or flying text, fancy and unusual fonts etc.

UX DESIGN SIMPLICITY

This is the another key in successful UX design. In UX design projects the simpler option is almost always better, and more user friendly one. Even if your service or product is complex, that doesn’t mean your customer facing websites should be. Its important to remember that most customers only want the most basic information from you, such as what is this and how does it work? According to the text, simplicity can mean several different things like:

LOTS OF EMPTY SPACE

In design terms this is refereed to as negative, or white space. Through of course it doesn’t have to be white. Dark text on a light background is easiest to read. In general, the more effectively breathing room is placed between various page elements lines of text and zones on the page, the easier it is for the user to grasp where everything is. You should use fewer options. When users have to make choices, there is a lot of psychology of play. There’s worry about making the right choice, confusion and doubt over the options, in decision paralysis and more. Studies have found that people faced with fewer choices generally choose more quickly and confidently, and are more satisfied with their decision later.

USE OF PLAIN LANGUAGE

Unless your website is aimed at a highly specialized technical field, there’s usually no need to get fancy words you use. Clear, simple, well structured language is the best option when creating a great UX design.

STICKING TO CONVENTIONS

And finally, sticking to conventions. As we’ve observed before, conventions are excellent shortcuts for keeping things simple for the users. There is no need to reinvent the wheel and try to teach your users a whole new way of navigating a website.

THE VISUAL WEB

The feature of communication on web lies in visuals. According to a study done by 3M,humans process images 60,000 times faster than we process words. Therefore, we need to shift away to those with a visual anchor. So in this example, Pinterest website is the best example for visual heavy. And also can consider micro website and microblogging, in this we try to express with less text and more visual based elements like images, videos, info-graphics, and podcast etc. Everything is starting to look a little more like Pinterest really.

CATALYST MOBILE

Mobile devices, you know looking tablets or smartphones. It is a much better user experience to scroll through pictures on a four inch screen then it is to scroll through lines and lines of tiny text. In this example, the weather channel in the app has made things much more visual.

UX DESIGN CREDIBILITY

This means how trustworthy and legitimate something looks. Obviously this is going to be very important for the user. It plays a big role for users when they’re deciding weather or not to use your website. Here are some cues that, according to the text, visitors use to determine the credibility of a website.

LOOKS

First there’s looks. Does your website look professional, beautiful and simple?

CONTACT US

Prominent phone numbers and addresses where they are easy to locate. This assures visitor that there are real and genuine people behind a website and they are easy to reach.

ABOUT US

Informative and personal about us. You customers want to see the inner workings of a company and are especially interested in learning more about the head honchos, or its leadership. Consider including key employee pictures and profiles to add personality to the website.

TESTIMONIALS

Genuine testimonials are the great way to show potential customers what your current customers have to say about your organization. Trust is vital and this is one way to encourage it. Don’t add false, fabricated, or made up testimonials. It has to be real.

ASSOCIATION

Logos of industry associated and awards, accreditation’s, recognition, if you belong to any relevant industry association or won any awards, feature them. Not only does this goes a long way towards establishing your credibility but it will show that your on top of your game and a notch above the competition.

REFERENCES

Links to credible third party references or endorsements. This is the way to assert your credibility without tooting your own horn, fresh.

UP-TO-DATE CONTENT

A new section that was updated a year ago implies that nothing has happened since or that no one cares enough to update it. So make sure that’s you’ve got fresh content on your website, particularly on that section. Fresh and regular updated content makes a lot of sense in building credibility.

ERROR FREE

And finally, and this should be obvious, but no errors. Spelling and grammar mistakes are exceptionally unprofessional, and while large majority of readers may not pick them up, but the one or two who do will question your credibility. This also extends tobroken links, malfunctioning tools, and interactive elements that don’t work as advertised.

WEB DESIGN

Website designing is a persuasive communication unlike other marketing communication. Websites that look good and rank even better in search engines with proper UX design is paramount to online success and makes your business stand out. Every web designer should put the UX design concepts together.

KEY CONCEPTS

DESIGN FOR PERSUASION

Designing for a persuasion in particular.

VISUAL IDENTITY

Your visual identity should match that of other marketing and branding assets.

DESIGN THEORY

There are aspects of design theory and color theory that need to go into the design of your website, just like they would in any other marketing communication pieces. In terms of things like white spaces, overall look and feel that ladders up to that brand.

COLOR THEORY

In terms of color, different colors mean different things, psychologically and indifferent cultures. So you should make sure that you do research into your color pallet, and what that represents.

COLLECTING DESIGN ASSETS

You need to collect all of your design assets and make sure that everything is ready to go and matches the overall brand strategy.

FONTS

And then, you need to think about fonts and what’s easily readable, what colors work in terms of being able to read on a screen and things like that.

WEB DEVELOPMENT

We have the design of a website, how it looks, and then the development, how it works. Once you figured out your design, this is the process of taking your finished web designs and make into fully functioning website. Your web developer should bethinking about these things. Do you want a static website or a Content Management System?

STATIC WEBSITE OR CMS

A static website doesn’t change often in terms of content. A web developer need to make any necessary changes. The Content Management Systems (CMS) should be used when you have content that changes often. And you need to have people with varying technical expertise and from any location in the world, to be able to make updates.

SERVER-SIDE LANGUAGES

Think about the server-side languages. There are several server-side language options. Server-side languages are the hided web coding languages that determine how your website works with and communicates with the server. Considerations should include cost as well as scale-ability.

FRONT-END LANGUAGES

Web users expect correct interactive experiences. Typically front-end languages are client side languages, those that are interpreted and executed in the user’s browser as opposed to the server. Again, cost is a consideration. But so are things like features, availability, performance, browser and operating system support, and open source versus propitiatory software.

MOBILE WEBSITE OR APP

When looking at mobile, you have to decide if you want to create a mobile friendly site or a separate app. Another variation of this is a responsive site. Mobile websites can be accessed from any device, software etc. Apps however need to be design for specific operating systems. More information is available in the text regarding the pros and cons of creating a separate app versus using your site in a mobile space.

RESPONSIVE DESIGNING

The most important consideration that needs to be made when thinking about apps, mobile sites, or responsive design is to think about your user first. How much of your traffic comes from mobile? Do people coming to mobile have the same goals as those coming to the desktop sites? What is your budget? Do you have a existing site? Can it be adapted to mobile?

STEPS TO BUILD WEBSITE

As we did with designing a site, let’s look at how to build one!

PLANNING AND RESEARCH

This is the utmost important. Think about both the business and the users.

CHOOSE A DOMAIN NAME

Of course you have to choose your domain name. Domain name should be easy to remember and if possible include important search keywords for your business.

UX DESIGN AND CONTENT STRATEGY

The next step is to have your UX design and content strategy. This we have already discussed, but this is how it goes the overall process.

SEARCH ENGINE VISIBILITY

Search engine visibility is important in building your website too. Search engine traffic is more important than ever as users generally search for the site rather than typing the URL or a domain name into a browser. Search engine marketing to make sure that we can be visible there.

DESIGN

Then design your site. I have discussed principles of this already so now its state to implement them.

DEVELOPMENT

Once the site is designed, you need to turn those assets from design into a functioning website. Your web development team or web development firm will do this at this juncture in the process.

TEST AND LAUNCH

And then again, test, test, test. Make sure everything is working. Finally, make sure that UX design is what you want it, and then launch your site.