Category Archives: Help Review

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.

Advertisements

Help Review – Mozilla Firefox

I stumbled across Mozilla Firefox’s help system last week and was interested to find most of the articles were largely written by volunteers. I hadn’t come across this kind of model for documentation before so it raised some interesting questions. For starters, can a group of volunteer technical writers collaborate to produce an effective help system?

2016-05-20 11_32_36-Mozilla Support

Mozilla released Firefox as an open-source web browser back in 2002 and as such the source code is open to anyone. As a non-profit organisation, Mozilla also relied heavily on the code, along with the support and documentation being largely maintained by volunteers. Although the company now has a large workforce of paid employees, an army of volunteers also still contribute to roughly 40% of its work, which includes not only the documentation but also coding tweaks (around 24% of all source code changes) and even the Firefox logo design. The help system was created through the SUMO technical writing program, which invited participants (a mixture of college students and technical writing professionals) to take part in each release cycle in order to produce the documentation. Although the program is not currently active, the participants and other volunteers still seem to be actively involved in maintaining the existing help articles.

Firefox-3

First Impressions

Visually, I think the design and layout of the Mozilla Support homepage is really appealing, with all of the individual products and their logos mapped out in different sections. It just looks cool. The simple grey background, contrasting with the colourful designs of the Mozilla product icons and clearly marked out sections make it very easy to navigate. It was interesting to discover that some of the legacy of Mozilla’s design is down to an interface designer called Steven Garrity wrote an article listing everything that was wrong with Mozilla’s visual identity back in 2003 and was subsequently invited to their head office and asked to head up their new visual identity team which led a re-brand in 2004 when the now well-known Firefox logo, designed by Jon Hicks, was introduced.

2016-05-24 12_55_59-Start

The help is broken down into nine help topics, with multiple articles under each topic. The documentation itself is clearly laid out, although the screenshots are sometimes different sizes and formats (some fade into background, some do not etc.) and it is easy to spot where different technical writers have worked on the same article and used different styles to highlight sections of a screenshot. In the example below, you can see three different contributors’ work, with one opting for a crimson red rectangle to highlight ‘Desktop’, another using a orange-red circle and the third person using a brighter scarlet red oval:

Inconsistent

Each page does actually list the authors of each article so it is possible to see how many people have contributed to each article. This particular article had eight contributors but other have even more, and unfortunately it shows:

2016-05-31 12_31_59-How do I tell if my connection to a website is secure_ _ Firefox Help

In this article, which had 22 contributors, there were little issues like the screenshots being slightly different sizes. While it’s not the end of the world, the different styles of writing and formatting are pretty noticeable, even for someone without mild OCD, and it can look a bit messy and unprofessional. I guess it’s the kind of thing that’s forgivable when you’re using a free open-source browser but it could be easily remedied if Mozilla implemented a style guide for all contributing technical authors to ensure there is more uniformity with terminology, screenshots and how things are highlighted. Alternatively an editor could go through and make edits to clean things up where necessary.

Features

One thing I was really pleased to see in the help was the occasional gif clip and a good number of tutorial videos which ensure the content is dynamic and semi-interactive for its readers. The videos, which have been produced by Mozilla senior UX designer Michael Verdi, are short and well edited so they are very watchable. He has a personal, informal style and friendly tone which is more engaging than a robotic Siri/Cortana-style  narration.

At the top of each article, there is also a drop-down menu on the left-hand side which has some pretty useful features such as a link to any discussion items on the article’s topic, multiple language translations of the article, showing what other articles are linked to the article you are reading and seeing the history of who contributed and edited the article.

2016-05-27 11_44_48-Photos

In terms of help and support, it has three main branches: Twitter, a support forum and help articles. Again, this is a great way for Mozilla to keep all of their bases covered. The other great thing people volunteer to assist with all three of those branches as well, with volunteer contributors on Twitter, volunteers answering questions on the support form and volunteers writing the help articles themselves. These volunteers are prompted to help by various Volunteer for Mozilla Support buttons, as shown in the screenshot  below:

2016-05-26 14_34_31-Start

There is constant encouragement to get involved in things like the “Army of Awesome” (their Twitter helpers) and statistics about how help matters. For example, “1 Tweet can save 1 day” and “1 article can be viewed by 400 million users”. It just has a really positive, pro-active community feel about it.

Another common theme is the carton Firefox character, who is like a superhero-type figure, which appeals to everyone’s inner geek. It’s another simple but effective way to make  the support pages fun and engaging.

This slideshow requires JavaScript.

Conclusion

I am really impressed with the content and support that is being produced by Mozilla, especially given the high percentage of work being done voluntarily. On top of the written content, they are also managing to offer video tutorial content and a Twitter help account which are further supported by a support forum. It would be useful to have a style guide or some kind of lead technical author/editor to iron out any issues with uniformity but overall I think Firefox’s support pages prove that open source projects can be reasonably well-documented through crowd-sourcing volunteer technical writers. I’m not sure this model of documentation would work for everyone but I think Mozilla have proved that volunteers can collaborate to produce an extensive help system, this clearly isn’t just a big work experience project.

Help Review – Twitter

My stepmum recently asked for help publicising something online and my first suggestion was Twitter but explaining how to use it was a challenge in itself. Although it’s been around for a decade, I still don’t think it is that intuitive for someone who is unfamiliar with the basic concepts and terminology. As a result, the help is vital in explaining how to use it, what Tweets and Retweets are and the importance of followers.

Twitter’s Help link can be found by left-clicking your profile picture and scrolling down to the word Help or by clicking Help in the bottom dashboard.

Twitter2.jpg

First Impressions

The help homepage is pretty stylish, with a prominent white search panel where users can search for what they’re looking for. Underneath there are six key headings for commonly asked questions and even further down there are further sub-headings, a video tutorial and trending topics. Right at the bottom of the page there is an footer with some Quentin Blake-style cartoon people, presumably a hapless user and some friendly Twitter support staff in their Twitter-Blue uniforms. All very quaint but slightly disjointed if you compare the style of the trendy header with the children’s book illustrations in the footer.

Twitter3.jpg

Just testing it out as a “new” user to get to grips with the basics, there is the ‘Using Twitter’ section which introduces to the general concepts and there is a useful ‘Getting started with Twitter’ page, along with a glossary which even experienced users might find useful.

Features

The Twitter Support account is a great little feature. By creating a support account in their own social networking service, it not only encourages user engagement but the process turning to help becomes a seamless part of the Twitter user experience. It’s very neat.

2016-05-10 21_38_51-Twitter Support (@Support) _ Twitter

Commonly asked questions were mostly account-related, either being locked out or wanting to deactivate an account. For more complex issues that require assistance or intervention, the Twitter staff ask users to log a support case, referring them to this page here.

2016-05-11 11_20_04-Request help signing in to your account. _ Twitter Help Center

There is a nice and simple video tutorial about how to mute or block users featuring the same Quentin Blake cartoons. It is nicely put together but I think it’s a shame there aren’t more of these, like a bank of different tutorial videos. The only example I could find on the help site was how to mute a person on Twitter (I’m guessing this was the most commonly asked question the support team were asked):

I checked Twitter’s YouTube channel and there is a slightly longer version of this video, detailing how to block and report users but that was all. I think they’ve missed a trick here but I guess any answered questions can be Tweeted to their support account.

Hidden Features

It’s not so much a hidden feature but something I didn’t know about are the Twitter keyboard shortcuts. This list can be accessed by clicking on your profile picture and clicking Keyboard Shortcuts on the menu.

2016-05-10 22_04_21-Cortana

Another neat trick is the ability to embed Tweets. This can be done by either clicking the   ••• More (ellipsis) icon and selecting Copy Link to Tweet or Embed Tweet.

It’s quite a nice way to enhance content on a webpage. News sites in particular use this feature as a way to embed quotes from people, normally famous people or politicians, who have written something newsworthy on Twitter.

Conclusion

While it has some cool features, I would have thought Twitter could have added some more innovative aspects to their help, videos or maybe Vines in particular. I think the Twitter Support account is a good idea and it’s clearly being used quite actively. However, this could also be an indication that not enough people are using the help. Additional videos on recovering passwords, unblocking an account and deactivating accounts and sharing them on their Support account would probably halve the number of Tweets they receive. Despite this, I did like the style of the documentation itself, the familiar cartoon illustrations make it approachable and the content itself is a happy medium between informal and informative.

 

Help Review – Skype

The first help system I decided to look at was Skype, which I thought would be interesting from a technical writing and personal perspective because it’s an application I use every day to contact developers and other colleagues based in different offices across Sweden and Europe. Launched by Scandinavian entrepreneurs Niklas Zennström and Danish Janus Friis in 2003 and bought by Microsoft for $8.5 billion (£6 billion) in 2011, the communication tool is now used by more than 300 million users worldwide. Although it is fairly intuitive and easy to use, I was curious to take an in-depth look at the documentation behind such a globally popular application, especially considering the diversity of its users.

First Impressions

To access the help system while using Skype you need to click Help and then Go To Support. This will launch the Skype Help homepage, an external site, shown below:

Skype.png

My first impressions were it is very clean and user friendly (there’s even a blurry friendly-looking customer service bloke in the background) with a prominent white search box and six main help topics clearly marked out with the same blue icon buttons used in Skype. While hosting the help on an external site does result in a break in user experience, the help pages retain Skype’s bold and colourful branding, with bright blues and loud yellows, so they don’t feel too far removed from the software itself.

Features

By clicking the Windows Desktop ∨ drop-down menu, the user is able to select what kind of application (Android, iPad, Mac, Skype for TV etc) they are using to access Skype and the help adjusts itself accordingly. I thought that was pretty neat.

2016-04-20 18_56_27-Help for Skype – user guides, FAQs, customer support ‎- Microsoft Edge

Another cool feature is if Skype users are having connection issues etc., by clicking Skype service status, they are taken to page with live status updates, which Skype have named Heartbeat. This is where Skype web engineers post updates, highlighting the time and dates, so users know if there is an issue which they are working on.

The stand-out feature for me though is Skype’s tutorial videos because they’re so good. Simple and to the point, between 30 and 45 seconds, they’re very watch-able, well narrated and easy to follow for people who learn by watching something being done rather than by reading. The videos can be found about halfway down the page by clicking See all guides:

skype

The clip below is the introductory 36-second video, hosted on Youtube, which informs users how to get started by adding contacts:

This is something I’ve earmarked to add to my own documentation when I can get the software and find the time. The technology users of my generation don’t want to read through pages and pages of boring text, they want to either Google the answer or watch the video to quickly learn how something is done. Bish-bash-bosh. If done well, as shown here, I think videos are one of the best tools for explaining basic or even complex concepts quickly and efficiently.

Hidden Features

There are several features in Skype that are slightly hidden and not particularly prominent in the help. One of these is commands that can be typed to allow the user to change settings or learn more about the participants of a chat conversation. The most helpful of these is:

/help – typing this in the chat will produce a list of available commands that can be used.

availablecommands

These can be used for things like finding a specific text in the chat, leaving a conversation, finding out the number of people in the chat group and the maximum number of people who can join, or even finding out user profile information about a person in your chat group. They’re slightly buried but these can be found here in the Skype help.

The other popular hidden feature are emoticons, which are a fun way to brighten up a conversation and let people know how your feeling. Interestingly, the help does document the main emoticons and their shortcuts as well as the “Hidden emoticons”, shown below, which include (drunk) and (smoking) emoticons among others:

Emoticons

However, the real hidden emoticons, which appeal to the immature inner child in myself and fellow colleagues, aren’t documented at all. To quote Skype, “Shhh, don’t tell anyone!”, but these include such delights as a mooning emoticon (mooning), an emoticon face mouthing “What the f**k?” (wtf) and the finger (finger), a good one for when someone in Skype chat deserves a good slap.

Hidden

I guess by not documenting them they just become more fun for immature techy geeks like myself and my colleagues to find and use to entertain ourselves.

Quality Control

A feedback option at the bottom of most of Skype’s help pages is a great form of quality control and measuring the quality of the documentation. It also gives the user a way to interact with the technical authors who wrote the content.

If you click Yes it thanks you for your feedback, if you click No then you are able to leave feedback but selecting a predefined answer or by clicking Other, entering your own opinions on why the help failed you. It’s a pretty simple but effective way to get feedback from your readers:

2016-04-21 14_49_46-How can I update Skype for Windows desktop_

As well as the feedback option, there is also another fallback for readers in the form of the “Still need help?” and “Haven’t found what you were looking for?” links at the bottom of each page which takes the user to the Skype customer service contact details. It also provides a link to the Skype Community, a forum where Skype users can both post questions and answer them to receive “kudos” and rankings, in a similar reward scheme to Tripadvisor. Skype moderators also answer questions but it’s a good way to crowd source user experience and knowledge to find the answer to certain questions.

Conclusion

While there are certain drawbacks in hosting help externally, rather than embedding it, I think Skype have done an excellent job. It’s stylish, innovative and fits with their product relatively seamlessly, the only negative is the break in user experience. The help itself isn’t 100% comprehensive but when I tested out the search feature, it returned answers to my questions most of the time, with only one or two failures to find an answer. However, those are both minor negatives in what is largely a positive experience. As user-facing documentation goes, this help system is hard to fault and deserves a lot of credit for its fun and innovative features.