UX tips for mobile website design

Why is mobile design so important?

Source: Global Stats

Shrinking the nav bar

Drop down menu versus slide in menu
Source: Dribbble
Source: Stack Exchange
Hamburger icon versus ‘Menu’

Buttons and making the most of touch

Source: Smashing Magazine
Source: Smashing Magazine

Type in mobile design

Suitable padding versus large padding

Working mobile upwards

Source: Adobe

Forms… keep them simple

Drop the pretty pictures… pick up speed

It’s good to stereotype

User personas

Wireframe and test, test, test

The website is launched so it’s finished, right?

Mobile website UX summed up

  • Always look at other mobile sites out there and take note of their positives. Similarly, take lessons from the bad websites you come across and don’t make the same mistakes.
  • Don’t make it difficult for the user. Try not to challenge their expectations too much.
  • Make the navigation simple by using a hamburger icon in the top left or right of the screen.
  • Make buttons known to your user and make them easy to press with adequate clickable areas.
  • Use suitable text sizes for your audience and choose margins and padding wisely.
  • Work mobile up. Always try to start with mobile designs and expand features onto tablet and desktop. Use artboard tools on Photoshop or Sketch to help with this.
  • Make forms simple. Cut them down where possible and make the user’s life easier with features like automatic address finders.
  • Images… Lose them or optimise for mobile. Crop and resize to cut down loading times.
  • Wireframe your designs and don’t forget to test, test, test.
  • Most importantly… Always consider your user.

Follow us

www.monkeysource.co.uk

Find us on Facebook, Instagram, Twitter and LinkedIn

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store