Tag Archives: UX Design

UX Design: The Good, the Bad and the Ugly

The Good

One of the nicest pieces of UX design I’ve come across recently is the Monzo banking app. When a friend from university said he was part of team setting up a bank it piqued my interest, partly because it sounded so ambitious and partly because I worked in the payment industry at the time.

monzo_horz_lightbg

Founded in 2015 as Mondo before a legal dispute forced them to change the name, they are part of the new crop of so-called “challenger banks”, set up to battle the old guard of banking institutions who are losing touch with their customers, the smartphone generation in particular.

Their USP is that Monzo is built with the latest modern technology (developed in Google’s coding language Go) so is “as smart as your phone”, easy to use and is able to offer instant notifications when payments are made.

monzo-screen

spending

It’s difficult to convey how nice the UX is in a still image but the app is incredibly clean and intuitive and makes it a fun way to map your spending. As you make purchases on your Monzo card they appear instantly in your app where you can see the name of the merchant, the amount spent, as well as map location, the category that your purchase fits into (entertainment, transport, groceries etc) and it is possible to attach a receipt and a note, completed with emojis. Overall, it’s just a very pleasing app to use.

The Bad

One my tasks at work is to send out version releases and patches using a piece of software called BizWizard which is made in Sweden. I’m going to be brutally honest, the old version of the product really sucked and I dreaded using it because I had so many issues with it.

bizwizard_retina_660

For starters, it wouldn’t run on Google Chrome and would crash unless running with Edge or Firefox.  I also found that most of my time on Bizwizard seemed to be spent watching the same grey progress bar as it slowly moved from screen to screen:

bizwizard

I thought it might be related to the amount of messages being stored but it is slow to navigate between most screens, even those without much data. It just made the entire experience of using it very dull and frustrating.

I’m not going to be totally negative about Bizwizard because the latest version is a dramatic improvement and for the most part, it’s really easy to use. I just encountered one more issue that I didn’t like in the new version of the content editor, which is that when I finished writing a message, my natural inclination was to click the prominent blue Revert button at the bottom of the screen, assuming that was the Save button (See screenshot below):

bad-ux
The Revert button which tricked me into thinking it was a Save button in BizWizard.

It’s probably a result of using Confluence, where the Save button is in the button right (see below), but as a result of clicking Revert my text was wiped with no way to undo or get it back. Very frustrating as a first time user of the new version.

confluence
The Save button in Atlassian Confluence.

I suppose I can’t be too hard on BizWizard for creating a button in a similar style and position to Confluence but it shouldn’t have so much prominence because it is a more natural place for a Save button. I’ve sent my feedback to them so it’s up to them whether they change it or not.

The Ugly

Linkedin is actually an app I use quite a lot and occasionally use to share my blog posts but unfortunately there are quite a few things I don’t like about it and the overall experience.

linkedin

Apart from the feeling that the “professional network” is striving to turn itself into Facebook and forever tries to force connections on you, there are other things that annoy me and just make it an unpleasant and sometimes annoying user experience.

Take the homepage for example, there is just so much going on. It’s just a bit of an information overload and makes me want to close it down. See screenshot below:

linkedin-2

There are so many things that demand your attention here in my opinion, with the orange warning bar about emails at the top, the yellow button begging to be pressed so I can reconnect with colleagues (not today thanks), blue links encouraging me to improve my profile and grow my network, an advert asking me to try Hired today, and a tab informing me I have one new update (and that’s having already read my notifications). It’s just far too much, like a needy kid screaming for attention, a lot of it just unnecessary and off-putting. It ruins the user experience.

In contrast, the smartphone app version is actually really nice to use and much cleaner than the web version. It’s a much more enjoyable user experience with a nicely designed UI and much less information to deal with. See screen below:

linkedin23

The only negative is the red notifications are often unclear so I don’t always know what I’m getting notifications for and there still seems to be an ongoing issue with messages/emails,  for example receiving and sending duplicates of the same message.

As a technical author I do find myself looking at software and applications through the eyes of a first time user/ tester so I’m maybe I’m being harsh with my criticism but development teams should always consider the user, their experience and how they would expect or like your product to work. If your product doesn’t work how they would expect it to, if they find it difficult to navigate or if they find the overall experience annoying or frustrating then they are unlikely to want to use it again and that’s bad news for business.

Please note: User experience is always going to be subjective so some people may agree or disagree with me about these examples. It goes without saying that all of the opinions above are my own and not those of my employer!

Advertisements

Snapchat’s UX: A Confusing Mess?

Snapchat might be the image messaging app of choice for today’s teenagers, with 10 billion daily users, but in my opinion the UX and interface design is a confusing mess and others seems to agree (‘Why is Snapchat’s UI so bad?’, ‘The Generation Gap of Snapchat’, and ‘Snapchat Built to Be Bad‘ are just some of the top hits when you search “Snapchat UX” in Google).

It’s frustrating but even as a fairly technical 31-year-old who has mastered the likes of WordPress and Twitter, I don’t think I’ve ever found  an app that is so un-intuitive. It seems the only way to learn how it works are by reading the various on-board prompts or through trial and error.

iphone-160307_960_7201

Take the home screen for example, my biggest issue for new users is that the majority of the icons are not universal. I’ve circled the icons I believe are fairly universal in green and highlighted uncommon/unknown icons in red:

iphone-160307_960_720

So of the seven icons/functions, only three (camera rotation, messages and take a photo) are obvious, the others are all ambiguous. Snapchat actually tells me that the ghost icon is where my contacts and settings ‘live’ through a bit of on-boarding but as for the small circle at the bottom and the dots in the bottom right, I’d have no idea unless I clicked them. Even the ‘flash’ icon in the top right isn’t the standard lightning bolt flash that you would expect to see on most cameras. Why make it ambiguous? It seems totally illogical but is it intentional?

The "stories" screen gave me a headache but that's another story...
The “stories” screen gave me a headache but that’s another story…

There are several theories to why it has been so successful despite having this seemingly un-user friendly design. One theory is the bad UX is intentional. By making it difficult for new or older users, its difficult for parents to look up posts by their children and their teenage friends without knowing their screen name. As a result posts remain personal. This theory was in part confirmed by CEO Evan Spiegel: “We’ve made it very hard for parents to embarrass their children. It’s much more for sharing personal moments than it is about this public display.” Similarly Amin Todai from Canadian creative design agency One Method wrote a blog post likening it to creating a new language that only under 30s could hear: “By virtue of it having an incomprehensible user interface, Snapchat has essentially created a new language that only people under the age of thirty can hear. Like a dog whistle for teens, except with more pictures of dicks and boobs.”

“Snapchat has essentially created a new language that only people under the age of thirty can hear. Like a dog whistle for teens, except with more pictures of dicks and boobs” – Admin Todai

That last comment brings me to the other reason that teenagers and others have flocked to Snapchat despite the poor UX/UI: dicks and boobs – the pornography aspect. It became an instant guarantee of seeing up to 10 seconds of nudity, whether it be horny teenagers wanting to see their love interests naked or glamour models sharing their goods, ultimately sex sells and Snapchat was offering it up , whether intentionally or not, to millions for free. In the same way that pornography is addictive, so is celebrity and there are a huge number of celebrities on the site, all offering instant snippets of their lives for all to see. The Kardashians, the Jenners, Justin Bieber, the Jonas brothers, are just some of the celebrity users who appeal to the teenage  and young adult Snapchat audience.

biebs.jpg
Talking of dicks: Here is popular Snapchat user Justin Bieber posing in a topless selfie.

The other theory is that Snapchat is basically more about fun than function and that is what gets people using it. Irrespective of how awful the UX is, youngsters will keep coming back because they find it fun to use, to share moments and stories, and to mess about with the different effects, filters and lenses to make funny photos and videos. Ultimately, I think all three of these theories have had some part to play in Snapchat’s success and there is clearly a generation gap in play here but maybe that’s the point, its popularity is down to it not being popular with my generation because we were never its target audience, it was always intended to be more fun for the younger generation it resonates with.

The Role of Text in UX

As software and apps become more user-friendly and commonly-used icons become universally understood, there is a growing tendency to scrap text.

Microsoft experimented with the minimalist icons-over-text approach in their release of Outlook 1997. As you can see from the toolbar, they left out the text descriptions and as a result non-experienced Outlook users apparently stopped using the toolbar altogether:

2016-07-06 16_01_02-ToolbarCompare-11-1-2005.png (590×113)
Microsoft Outlook 1997
Several designs later, with Outlook 2000, they had a rethink and text was added back in:

2016-07-06 16_06_09-outlook01.gif (768×537)
Microsoft Outlook 2000
While more recent designs are less icon-assisted and text has even clearer prominence:

2016-07-06 16_09_20-Inbox - james.scott@hoistgroup.com - Outlook.jpg
Microsoft Outlook 2013

Digital designer Thomas Byttebier makes some excellent points about the importance of using text in his blog here, with the concluding statement being “when in doubt, the best icon is a text label.” He lists a number of extremely popular apps and sites where icons are pretty ambiguous. Take Instagram and Spotify for example. Are people aware of what this icon actually does?

2016-07-06 17_13_37-Start

2016-07-06 17_12_09-Spotify

In both cases this in-tray icon is for accessing your inbox and sending direct messages but I think the messaging feature is clearly overlooked in both applications. When I asked friends who have been using the applications for several years whether they were aware of the messaging feature they just looked at me blankly. One said “Oh, that bikini thing”, the other thought it was a basket. So there’s clearly a lack of clarity over the  purpose of the icon but whether that’s due to the ambiguous design or a lack of need, I’m not sure. It’s probably a bit of both.

Twitter have also had some issues with ambiguous and non-universal icons, often presuming that users will just intuitively understand what the icons do and sometimes getting it wrong. As a result Twitter’s user growth has actually slowed as new users that are attracted to the site often have a hard time catching on to how it works.

pict--iphone-screen-template---messages--messages---templatepict--iphone-screen-template---messages--messages---template2

The arrow icon for ‘Reply’, the envelope icon for ‘Message’ and the ellipsis (three dots) ‘More Options’ icon are recognisable but the heart icon for ‘Like’ will only be familiar with people who have used Instagram and other social media. A new user is unlikely to know what the ‘Retweet’ icon does unless they are familiar with Twitter’s basic concepts. It is interesting to note that Twitter have added text labels to the bottom five icons (highlighted in green in the image above) because other than perhaps ‘Messages’ their function is not obvious to the user.

While documentation is sometimes seen as an afterthought in the development process, in my opinion the text and written content is an inherent part of user experience for all software, no matter how intuitive the UI designer thinks his icons are or user-friendly the product is. If you want to avoid ambiguity, text will always be the best way to get the message across to the user.