“Good design is easy to digest—the brain shouldn’t have to expend a ton of energy to figure out what the heck it’s looking at. With any luck, people will just “get it” without needing a 6-section explanation.”

Someone famous (or at least clever – please comment if it was you!)

KISS (Keep it simple Stupid)

For user accounts, the default user experience should be as elegant and as simple as possible. This UI animation below, goes some way to filtering down what was essentially the most simple mobile navigation I could get stockholders to agree on. As always, there will be compromises, (inline personal information editing. for example) but overall keep the Three Little Rules (scroll down) front and foremost.

 

DAD-Sportingbet-Anim-AccMan-320

My Account or my mobile Command Centre

Three little rules

Online accounts give users privacy, control and a personalised experience. Account management is a necessary evil. Except when it goes wrong, no user likes or cares about account management, they just want to access the service.

You can make account management less evil by following these three little rules:

  1. Don’t make the user guess – Almost every service on the web handles account management slightly differently. As a result, you have to be explicit about the requirements for your service. Otherwise, you’re just being cruel.
  2. Balance security with usability – Often, security folk will insist on an approach that compromises the user experience. This is foolish, because poor usability will lead to workarounds, and workarounds in turn lead to weakened security. Instead, aim for a design that is both secure and usable.
  3. Keep it simple – Account management is one of your biggest potential barriers to usage. Make the barrier practically invisible through a simple, seamless, pain-free design.

Account Management – Responsive wireframes

Recently I have been involved in the UX for Account Management for a worldwide responsive gambling site with over £7M in transactions daily, and nearly 4M registered users. This was my proposal;

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_02

Wallet Summary – Tablet landscape – 1024px

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_04

Wallet Summary – Tablet portrait – 768px

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_03

Wallet SummaryUX – Mobile – 320px – 425px

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_05 DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_06 DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_07

Wallet Summary – What the hell is it?

A user account should provide the following static, user-specific content:

  • Personal Information / Contact Information
  • Security Information
  • Links to members-only content areas
  • Deposit and withdraw, bonuses and global settings
  • A User’s history

Bet History UX – Tablet landscape – 1024px

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_21

Bet History UX – Mobile – 320px – 425px

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_22 DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_23

Best practice

Here’s a list of best practices (although not always possible!) that make user accounts more usable:

  • Inline Editing
  • Safe Editing (Undo features)
  • Reading a users account information back to them later.
  • Delete/Save/Export/Import Options
  • Security Features
  • Deposit and withdraw, bonuses and global settings

My Bonuses – Tablet landscape – 1024pxDEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_36

My Bonuses – Mobile (320px – 425px)

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_37

Conclusion

So now that we know some of the things that should go in a user account, how can we help users access their account?

Dedicate a link to the account. Most users expect to access their account information via the top right or top left corner of a website, with the preference being the top right. Here I used a “Hub and Spoke” architecture—a landing page that links out to individual sections.

Other options included a drop-down menu to give the user all of the choices at a glance. At the end of the day it you and your team that should choice the right method that suits your stakeholders.

Pssst… here is sneak preview of the final UI

DEI_ResponsiveWeb-AccountManagement-UI-Sportingbet_Page_02

Wallet Summary UI – Desktop (1440px)

DEI_ResponsiveWeb-AccountManagement-UI-Sportingbet_Page_04

Wallet Summary UI – Mobile (320px – 425px)

Let me know your thoughts – this is but a another contribution to the design community by Russell Webb Design. Please leave a content or message direct at info@russellwebbdesign.co.uk

©russellwebbdesign 2016