HOW TO CUSTOMIZE UX FOR MOBILE

So what does psychology have to do with it? When it comes to user experience, almost everything.

With so many device types and sizes and so many different ways to design websites for those devices, the user experience a designer creates is what determines overall success of the site and whether a user will return.

What is user psychology?

User psychology is the science behind what people want and need when they visit a website or mobile app. Psychology is rooted in everything from whether a user trusts your brand to how they feel about the message you are trying to convey.

And design is a big part of that. Everything from color to images to patterns to how the site works can impact those feelings and emotional connections.

Each of these elements should ultimately lead to an action from the user. Most psychology textbooks reference triggers that cause people to act and react. Those triggers also apply to web design, and even more particularly to mobile design, where a user almost always has to physically interact with a website to make something happen, such as the swipe or tap fingers on the screen.

  • Reciprocation: if you do something for users, they will do something for you. (They sign up for a newsletter, you give them a freebie.)
  • Framing: users will make comparisons between things. (Do I want this or that? Most users fall somewhere in the middle of all options.)
  • Salience: users want what matters now. (That’s why e-commerce websites add related items to the screen during the shopping experience.)
  • Social proof: users look to others to see what to do. (The influence of social media.)
  • Scarcity: users want what they can’t have. (Limited number of items.)
  • Contrast: What stands out in the user’s mind. (Design theory 101.)

Two different user experiences

While the triggers are the same regardless of the device, the user experience is not. Users overwhelmingly want the content to be the same regardless of device, but have different ideas of how to use and interact with that content.

Desktop websites are for reading and perusing. The reading and information gathering process may result in an action, but users often have a distinct reason for going to a website, such as work. Not all of these experiences are based on entertainment or pleasure and most of them may not be.

Desktop users are relatively still in their online interactions as well. Every action is done with a keyboard or mouse. There’s just not a lot of actual physical interaction with the device. (Few users will ever touch the screen.)

The user experience for mobile is significantly different. Users constantly touch the device – casing and screen. So the size of these elements and how they feel are quite important. This use of physical touch makes designing elements on the screen especially important, because they must be easy to touch, unlike desktop versions where the mouse click is always the same size.

Mobile device users often access websites with different intents. Entertainment or task completion activities are more common than reading and research actions. (Just think of how often you pull out your phone to play a game in line at the grocery store or respond to a text message.)

Physical differences also impact the psychology of mobile design. You have to consider lighting conditions, device size and touch options. How will these elements come together for an actual user?

User expectations

It all comes down to a central question: What does the mobile user want and expect?

Unlike with desktop websites, where users expect a visually dynamic and engaging experience that is relatively two-dimensional, mobile users want everything to feel real and live in the three-dimensional space.

Mobile users have come to expect certain things from the interface:

  • Every action needs to be tappable. (And easy to see and tap.)
  • Graphics and images should load fast, and might not be part of the mobile experience at all.
  • Options need to be contextual. Users want to know what’s next and where they can go from here; they don’t need to know every possible option.
  • Websites need to integrate with all mobile device functionality, such as mapping, calling and integration with other apps.
  • Interactions have to be easy and follow generally accepted patterns. Mobile users have almost zero attention span. If elements don’t work the first time – and without a lot of thought or explanation – the user is lost.

How to design it

The actual secret is combining triggers and user expectations; then design for them. Let’s break down a few examples of sites that do this well and how they combine triggers and mobile expectations for an excellent user experience.

MINT

Mint uses a card-style interface where every box is a clickable element in its mobile app design, whereas the desktop version features more click-style links. Bright color and plenty of white space contribute to the streamlined mobile version as well.

Triggers: Framing and salience are the key triggers here, because as a free service mint is asking you to sign up for limited time offers based on things you likely are thinking about or need, from credit card to insurance offers. 

Mobile expectations: Mint loads exceptionally fast with up-to-date user data. The mobile app drops many of the heavier images that appear in the desktop site and uses a simple vertical pattern for the user to track information. It also incorporates some nice UX tools such as thumbprint access on the iPhone and intuitive gesture control for moving between elements.

mint
mint-mobile

DISTILLER 

Distiller uses a responsive framework so that content looks and feels almost exactly the same on both the desktop and mobile versions. What the site does though is maximize the potential of the mobile format, with unique ways to navigate the content.

Triggers: You can easily see the way this site uses contrast to create user engagement. The use of color and white space in both website variations is designed to create excitement and encourage calls-to-action. (Just look at the brightly colored buttons and prominent placements.)

Mobile expectations: Distiller uses plenty of commonly accepted patterns to get users to engage, with a few subtle cues just in case the user might need help. Look at the second mobile screen, for example: The card-style elements (which are each unique links) can be swiped back and forth to see more content and a dot-style bar is used to show users how many elements are left. The navigation is also streamlined significantly and hidden in a hamburger icon so that users are not overwhelmed by options and can move freely on the mobile site.

distiller
distiller-mobile

THE WEATHER CHANNEL

The Weather Channel provides the exact same content on its desktop site and mobile app, but the experiences are drastically different. The desktop site has more information to read and look through, while the app focuses on what the user needs to know now.

Triggers: Salience (mentioned above) and social proof are a big part of what makes The Weather Channel mobile app different. The opening screen is weather where the user is standing at this time. With a flick of the finger, users can report conditions, share on social media and become a part of the well known brand’s weather story.

Mobile expectations: The app uses a modern, flat, card-style design to make every element easy to tap. There’s no menu to speak of because the entire premise is contextual, leading users from one element to the next based on their choices.

weather
weather-mobile

DOMINO’S PIZZA

Domino’s Pizza has made a big, public deal about how easy it is to order. And they are right. While the desktop site has a very traditional feel, the app uses plenty of mobile specific user interface tools – such as voice ordering – to make the process easy.

Triggers: Reciprocation and framing are the keys to the buying experience, with plenty of offers and options to choose from. Plus, the mobile version remembers a user’s preferences to make the process that much easier.

Mobile expectations: While Domino’s does use some functionality that isn’t common among these types of apps, it is explained well (such as the voice ordering icon). Navigation is built in contextually and the app is designed with plenty of contrast and small images that load swiftly.

dominos
dominos-mobile

THE TONIGHT SHOW

The Tonight Show is designed for entertaining users across devices. The desktop and responsive site, as well as the app, all look and function similarly. The mobile options are streamlined with a vertical hierarchy and elements are easy to take to watch.

Triggers: As with many other entertainment sites, salience and social proof are what keep people coming back. You want to be in the know with what is hot and trending and this is the place to find it.

Mobile expectations: One of the great little tricks on the mobile site is that it first asks the user if they want the app, as if to say “do you want the best experience we have to offer?” This is a great tool that users have come to expect. It’s easy to find the app because it is only one tap away and users don’t have to go looking for anything; it’s all right there in front of them.

tonight
tonight-mobile

Conclusion

Most users want and expect to find the same website content regardless of device, but they do often want the user experience to be tailored to the device they are using.

This device specific user experience will help increase user loyalty and those good feelings that most website owners hope users feel about them. Simply put, having a good desktop and experience and a good mobile user experience is important; they might not be the same thing.

Design for users by optimizing how they feel about, use and interact with their devices.

BY CARRIE COUSINS

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousinsMore articles by Carrie Cousins

46 thoughts on “HOW TO CUSTOMIZE UX FOR MOBILE”

  1. Hey there! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly?
    My website looks weird when browsing from my iphone 4. I’m trying to find a template or plugin that might be
    able to correct this issue. If you have any recommendations, please share.
    Thanks!

  2. I blog quite often and I genuinely appreciate your content.
    The article has truly peaked my interest. I will bookmark
    your site and keep checking for new information about
    once per week. I opted in for your RSS feed as well.

  3. An outstanding share! I’ve just forwarded this onto a colleague who had been doing a little research on this.
    And he actually ordered me dinner simply because I stumbled upon it
    for him… lol. So allow me to reword this…. Thanks for the meal!!
    But yeah, thanks for spending time to talk about this subject here on your blog.

  4. I think everything wrote made a ton of sense. But, think on this, what if you composed a catchier post title?
    I am not saying your content isn’t good., however
    what if you added a headline that grabbed folk’s attention? I mean HOW TO CUSTOMIZE
    UX FOR MOBILE | Haywhy Designs is a little vanilla.
    You ought to glance at Yahoo’s front page and watch
    how they write article titles to grab people to click.
    You might add a related video or a pic or two to get people excited about everything’ve written. In my opinion, it could
    bring your blog a little bit more interesting.

  5. I’m truly enjoying the design and layout of your website.

    It’s a very easy on the eyes which makes it
    much more enjoyable for me to come here and visit more
    often. Did you hire out a designer to create your theme? Superb work!

  6. Please let me know if you’re looking for a author for your site.
    You have some really great posts and I believe I would be a good asset.
    If you ever want to take some of the load off, I’d really like to write some articles
    for your blog in exchange for a link back to mine. Please
    send me an email if interested. Thank you!

  7. Wow that was strange. I just wrote an very long comment but
    after I clicked submit my comment didn’t show up.
    Grrrr… well I’m not writing all that over again.
    Regardless, just wanted to say fantastic blog!

    Feel free to surf to my blog … buy cbd gummies

  8. I am now not positive the place you are getting your information, but good topic.
    I must spend some time learning more or understanding more.

    Thank you for magnificent info I was searching for
    this information for my mission.

    Feel free to surf to my website: best CBD gummies

  9. I don’t know whether it’s just me or if everyone else encountering issues with your blog.

    It appears as if some of the written text on your posts are running off the screen. Can someone else please provide feedback and
    let me know if this is happening to them as well? This might be a issue
    with my web browser because I’ve had this happen previously.
    Thank you

    Look at my web blog: buy cbd gummies

  10. Negatif SEO ile rakiplerinizin sitelerini kolaylıkla alt sıralara düşürebilir ve
    siz rakiplerinizin yerine geçebilirsiniz.
    Sizler için sevmediğiniz yada rakip sitelerinize ANTİ SEO
    çalışması yani Negatif SEO çalışması yapabilirim.

    With negative SEO, you can easily lower your competitors’
    sites and you can replace your competitors.
    I can do ANTI SEO work, that is, Negative SEO work for you or
    your competitor sites that you do not like.

    Negatif SEO

  11. Does your site have a contact page? I’m having problems
    locating it but, I’d like to shoot you an email.
    I’ve got some suggestions for your blog you might be interested in hearing.
    Either way, great blog and I look forward to seeing it develop over time.

    my web blog best delta 8 thc

  12. Aw, this was an incredibly nice post. Finding the time and actual effort to make a
    really good article… but what can I say… I hesitate a whole lot and don’t manage to get
    anything done.

    Here is my webpage :: delta 8

  13. Woah! I’m really loving the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s very difficult to get
    that “perfect balance” between superb usability and visual appearance.
    I must say that you’ve done a great job with this.
    Additionally, the blog loads extremely quick for me on Safari.
    Exceptional Blog!

    Also visit my web blog; where to buy delta 8

  14. I’m really enjoying the theme/design of your website. Do you ever run into any internet browser compatibility issues?
    A couple of my blog visitors have complained about my blog not operating correctly
    in Explorer but looks great in Firefox. Do you have any ideas to help fix this issue?

    Visit my site – buy cbd gummies

  15. I blog quite often and I seriously thank you for your content.
    This great article has truly peaked my interest. I am going to book mark
    your blog and keep checking for new information about once a week.
    I opted in for your Feed as well.

    Also visit my web page – cbd for sale

  16. I’ve been surfing online more than 3 hours these days, yet I by no means discovered any attention-grabbing article like yours.
    It is beautiful price sufficient for me. Personally, if all web owners and bloggers made excellent content as you did, the internet will
    probably be a lot more helpful than ever before.

    Have a look at my web site :: cbd

  17. Fantastic blog you have here but I was curious about if you knew of any message boards that cover the same topics discussed in this article?
    I’d really love to be a part of community where I can get feed-back from other experienced individuals that share the same interest.

    If you have any recommendations, please let me know.
    Kudos!

    Also visit my web site … buy cbd

  18. Fantastic site you have here but I was curious about if
    you knew of any discussion boards that cover the same topics discussed here?

    I’d really love to be a part of online community where I can get feedback from
    other knowledgeable individuals that share the same interest.
    If you have any suggestions, please let me know. Thanks!

    My site – best delta 8

  19. Thank you for every other wonderful post. The place else may just anyone get
    that type of info in such an ideal means of writing? I have a
    presentation subsequent week, and I’m at the search for such information.

    my site – best delta 8

  20. Hmm it appears like your blog ate my first comment (it was extremely long) so I
    guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog.
    I as well am an aspiring blog writer but I’m still
    new to the whole thing. Do you have any tips and hints for first-time
    blog writers? I’d definitely appreciate it.

Leave a Reply

Your email address will not be published. Required fields are marked *