snap chat interface analysis report

2014 Spring Semester Interface Design 2010220016 Hyojin Kim

2

Introduction About Snapchat Strength & Weakness

Table of Contents

Comparison About Poke

Snapchat vs Poke

Evaluation Information Architecture

Heuristic Evaluation

Cognitive Walkthrough

User Test

Problem Summary

Design Solution

About Snapchat

Introduction

3

Snapchat is a photo messaging application ("app") developed by Evan Spiegel and Robert Murphy, then Stanford University

students. Using the application, users can take photos, record videos, add text and drawings, and send them to a controlled list of

recipients. These sent photographs and videos are known as "Snaps". Users set a time limit for how long recipients can view their

Snaps (as of April 2014, the range is from 1 to 10 seconds), after which they will be hidden from the recipient's device and deleted

from Snapchat's servers.

1.  sending a ‘Snap’ to my friends

2. making my story

3. sharing live video

Enjoy fast and fun mobile conversation! Snap a photo or a video, add a caption, and send it to a

friend. They’ll view it, laugh, and then the Snap disappears from the screen-unless they take a

screen shot!

You can also add a Snap to your story with one tap to share your day with all of your friends.

The best conversations happen when both friends are present, so this will let you know of if your

friend is Here in your Chat so that you can give each other your full attention. And if you both Here,

simply press and and hold to share live video-and Chat face to face.

More Functions

About Snapchat

Introduction

4

The interface of Snapchat, consists of a large circular button located at the center of the bottom portion of the screen, flanked on the sides by a picture of a squircle box on the left hand side, and a striped box on the right hand side.

The large circular button is the camera button. By pressing the button once, the application will take a still image. By holding the button, the application will instead record a short video lasting up to 10 seconds which, just like a still image, can have text applied to it by the user, before it is sent away.

Inteface of Snapchat

1. Center Button

2. Striped Box The two-dimensional striped box on the right hand side of the interface takes the user to their contacts list, allowing the user to view their Snapchat friends and find friends from their phone contacts.

3. Squircle Box The a squircle box on the left hand side of the interface takes the Snapchat user to a menu that shows the user the snaps he/she has been sent by other Snapchat users, along with the snaps that the user has sent to other users. Users are informed by text whenever one of their snaps has been viewed or not, and whether it has been screenshotted or not. Users view Snaps sent to them by other Snapchat users by pressing and holding onto the image or video. The image or video will remain for the time set before it is permanently removed.

123

About Snapchat

Introduction

5

After taking a photo or video, the user can proceed to alter the image, by applying text and/or ink drawings onto the image, before sending it off to a controlled list of recipients. Recorded images and videos can be saved by the sender prior to sending by pressing the white arrow in the bottom left-hand corner.

Inteface of Snapchat

1. Drawing

1

3 4

2. Set a time limit 3. Save to gallery 4. Add to my story

2

Users can set the time duration of the photo or video to be sent.

5. Send

5

About Snapchat

Introduction

6

Cons

Pros and Cons of Snapchat

Pros

Privacy •  Users can set time limit of pictures and videos so that they only exist temporary. •  Even the users synced their phone book, they can add people th

ey want as friends •  Snapchat has screenshot alert. If the recipient takes a screenshot,

alert will notice the sender about it.

Usage inducement •  Snapchat offers a point system. If a sender sends a picture or vide

o and the recipient opens it, both sender and recipient gain one point. The points of the user him/herself and his/her friends are shown by tapping on the user names in the friends list menu.

Menu icons are not intuitive. •  It is unclear what the colors mean and what the different shapes

mean. User can not know where he/she is at •  Although all the menus are vertical, It is hard to know navigate because users can not know where they are at.

Poke vs Snapchat

7

About Facebook Poke

Comparison

Facebook launched a new mobile app called Poke. It’s strikingly similar to Snapchat. Both Snapchat and Poke let you send pictures or videos which are then destroyed within a matter of seconds.

Facebook Poke vs Snapchat

Facebook Poke Snapchat

Message, Poke, Photo and Video Message, Photo, and Video

Text, Draw over images Text, Draw over images

Time-limited sharing(1, 3, 5, 10 seconds) Time-limited sharing(1-10 seconds)

Location service No location service

Screenshot alert Screenshot alert

120 Character Messages 33 Character Photo captions

Facebook username Custom username

Facebook Terms of Service Photos deleted from servers forever

Countdown clock Countdown clock

10 second video limit 10 second video limit

Facebook Friends Facebook, Phonebook, & Username Friends

Poke vs Snapchat

8

Differences between Poke and Snapchat

•  The way Snapchat and Poke connect you to friends A difference between Snapchat and poke is the way Snapchat and Poke connect you to friends. Snapchat uses Facebook to find friends, and obviously Poke does the same, so Poke has a leg up in terms of auto-integration. Still, Snapchat may help you actually find more friends with the app, as you can search by phone number or user name to add friends. It’s also worth considering Snapchat’s username customization. The app has a loyal base of users with chosen screen names. That could be one of the bigger differences between Snapchat and Facebook Poke. When you download Poke on a mobile device, you instantly log in with your Facebook Profile, relegating you to the name you use on Facebook and the friends you have there. Though I don’t believe in the slightest that Snapchat is used primarily for sexting, I do think that there may be some users who enjoy snapping with randos (as evidenced by Twitter) that would like to keep their anonymous user name. •  Interface – almost the same but Snapchat as simpler design The Snapchat interface is pretty simple. After launching the app, you’re taken to the camera, which has a center button to snap your shot or take your video. A button in the bottom right takes you to a menu with My Friends, Find Friends and Settings, and a cube- shaped button in the bottom left directs you to a log of all your Snaps, sent and received, old and new. Facebook Poke’s interface is a bit more complex, but not by much. On the bottom menu bar, there’s a Poke icon that lets you Poke (the old-fashioned kind) any of your Facebook friends. The speech bubble icon on the menu bar lets users draft a message, the camera icon lets you snap a photo, and the video icon lets you take a video. Your Pokes show up above the bottom menu bar, so there’s one basic page for everything. Although the interface of Facebook Poke is a bit more complicated than Snapchat’s, all four icons you need are located on a general bottom menu bar, and your Pokes appear directly above.

Comparison

Information Architecture of Snapchat

9

Evaluation


10

Criteria and Questions

Evaluation

# Categories Subsections

1 Visibility of the system status

1.  It is easy to know the current location within the overall map of the application.

2.  It is clear what information is available at the current location and where you can

go from the current location.

3.  The current information matches what you expect to find.

4.  Is it easy to recognize the vitalized part

2 Consistency and standards 1.  Menus are used and appear in standard application style.

2.  Link labels match destination page titles or headers.

3 Recognition rather than recall

1.  Main functions of the application are easily accessible. (There is a short menu

paths for the main functions or the main functions are visible at all times.)

2.  Design elements such as objects, actions and options visible to user that user does

not have to remember the information.

4 Flexibility and efficiency of use 1.  Users can customize frequent actions/tasks.

2.  There are short cuts for frequent actions.

3.  Information are presented properly in right situation.

5 Balanced and simplistic visual design 1.  Is it easy to distinguish between the background theme and context

6 Help and documentation 1.  Are help messages noticed at the right moment based on the user’s situation

2.  Can you find the ‘help’ function easily

3.  can you go back to the place where you had problem


11

1.  Visibility of the system status

Evaluation

It is easy to know the current location within the overall map of the application. It is clear what information is available at the current location and where you can go from the current location. The current information matches what you expect to find. Is it easy to recognize the vitalized part.

At all of the main four screens, the current location within the overall map of the application is not displayed.

PROS GRAY ZONE CONS


12


Evaluation

It is easy to know the current location within the overall map of the application. It is clear what information is available at the current location and where you can go from the current location. The current information matches what you expect to find. Is it easy to recognize the vitalized part.

PROS GRAY ZONE CONS

At the camera page, which is the default screen, it is almost impossible to figure out how to move to another menu because there are no implications and bottom buttons are unclear.

Swiping the screen to left and right will let the user

move to other menus.

Tapping on the bottom

buttons will also lead to other menus


13


Evaluation

It is easy to know the current location within the overall map of the application. It is clear what information is available at the current location and where you can go from the current location.

The current information matches what you expect to find. Is it easy to recognize the vitalized part.

PROS GRAY ZONE CONS

Since the shape of the buttons are not intuitive and the movement between menus are horizontal with random sequence, user can not even expect what kind of information while navigating.

Default Screen


14


Evaluation

It is easy to know the current location within the overall map of the application. It is clear what information is available at the current location and where you can go from the current location. The current information matches what you expect to find.

Is it easy to recognize the vitalized part.

It is easy to recognize the vitalized part as the vitalized part is demonstrated with different color, opacity or size.

PROS GRAY ZONE CONS

Opacity change Size

change


15

2. Consistency and standards

Evaluation

Menus are used and appear in standard application style. Link labels match destination page titles or headers.

Menus appear in standard block shaped or divided grid style.

PROS GRAY ZONE CONS


16

2. Consistency and standards

Evaluation

Menus are used and appear in standard application style.

Link labels match destination page titles or headers.

Link labels match destination page titles or headers. However, some labels is irrelevant to destination page’s or menu’s title.

PROS GRAY ZONE CONS

Pressing on Snapchat will lead to camera screen.

Pressing on My Friends will lead to camera screen.


17

3. Recognition rather than recall

Evaluation

Main functions of the application are easily accessible. (There is a short menu paths for the main functions or the main functions are visible at all times.) Design elements such as objects, actions and options visible to user that user does not have to remember the information.

Main functions of the application are easily accessible because the information architecture is not complicated and most tasks are done with short process. Also there are short cuts when for main functions.

PROS GRAY ZONE CONS

Pressing on the top right button will lead to ‘Find Friends’ menu.

Pressing on the bottom right

button will lead to camera

screen.


18


Evaluation


Camera page’s accessible menus and menus’ icons are different depending on through which way the user got to camera page, which leaves the user confused as he/she has to remember the path to get to camera page with certain menu icons.

PROS GRAY ZONE CONS

Gallery menu

Back to chat page

To friends

list

To chat

list

Add to my

story


19


Evaluation


Although managing one’s own story should be convenient, story editing menu icon is hidden unless the user taps on a posted story.

PROS GRAY ZONE CONS


20


Evaluation

Main functions of the application are easily accessible. (There is a short menu paths for the main functions or the main functions are visible at all times.

Design elements such as objects, actions and options visible to user that user does not have to remember the information.

Many of the buttons are represented in icons which are not so intuitive and rather confusing.

PROS GRAY ZONE CONS

Very ambiguous icons Very ambiguous icons

These icons are obscure and the function of those are difficult to

guess.


21

4. Flexibility and efficiency of use

Evaluation

Users can customize frequent actions/tasks. There are short cuts for frequent actions. Information are presented properly in right situation.

There is no customizing function in Snapchat, but it supports sending by presenting best friends list to make sending more quick and easy. However, best friends is also not customizable.

PROS GRAY ZONE CONS

User can only designate the number of best friends. How becomes best friends

is not explained.


22

4. Flexibility and efficiency of use

Evaluation

Users can customize frequent actions/tasks. There are short cuts for frequent actions.

Information are presented properly in right situation.

All information are presented properly in right situation. Except at chat menu page.

PROS GRAY ZONE CONS

The information tells to send a chat on the text

engine, but ways to send text only chat and

“snap chat” are different.


23

5. Balanced and simplistic visual design

Evaluation

Is it easy to distinguish between the background theme and context

Because of the background being white, vivid theme colors and dark text colors, it is really easy to distinguish between the background theme and context.

PROS GRAY ZONE CONS


24

6. Help and documentation

Evaluation

Are help messages noticed at the right moment based on the user’s situation Can you find the ‘help’ function easily Can you go back to the place where you had problem

Help messages appear and notice when user mistakes the hand stroke while trying to view chat or send chat, and also when some function is inactivated.

PROS GRAY ZONE CONS

If the user makes wrong hand stroke, the help message will appear and support the user.

If the user makes wrong hand stroke, the help message will appear and support the user.


25


Evaluation

Are help messages noticed at the right moment based on the user’s situation

Can you find the ‘help’ function easily Can you go back to the place where you had problem

Finding ‘help’ function is very easy and short.

PROS GRAY ZONE CONS

Drag the page up Tap on support


26


Evaluation

Are help messages noticed at the right moment based on the user’s situation Can you find the ‘help’ function easily

Can you go back to the place where you had problem

User can always re-send chat that had failed in delivering. Also, user can go back to edit image/video page from ‘selecting friends to send to’ page and come back with saved selection made by user before going back.

PROS GRAY ZONE CONS

Press send button

Select the receiver and go back to modify

the image / video

Modify the image / video and then press

send button again

The receiver still will be selected


27

Evaluation

SCORE

# Categories Subsections Score

1Visibility of the system status

1.  It is easy to know the current location within the overall map of the application. 2.  It is clear what information is available at the current location and where you can go from the current

location. 3.  The current information matches what you expect to find. 4.  Is it easy to recognize the vitalized part

3/7

2 Consistency and standards 1.  Menus are used and appear in standard application style. 2.  Link labels match destination page titles or headers. 4/7

3Recognition rather

than recall

1.  Main functions of the application are easily accessible. (There is a short menu paths for the main functions or the main functions are visible at all times.)

2.  Design elements such as objects, actions and options visible to user that user does not have to remember the information.

2.5/7

4Flexibility and efficiency of

use

1.  Users can customize frequent actions/tasks. 2.  There are short cuts for frequent actions. 3.  Information are presented properly in right situation.

4/7

5Balanced and simplistic

visual design 1.  Is it easy to distinguish between the background theme and context 5/7

6 Help and documentation 1.  Are help messages noticed at the right moment based on the user’s situation 2.  Can you find the ‘help’ function easily 3.  can you go back to the place where you had problem

6/7


28

Evaluation

Criteria and Questions

Strength

Help and documentation •  Help messages appear and notice when user mistakes the hand

stroke while trying to view chat or send chat, and also when some function is inactivated.

•  Finding ‘help’ function is very easy and short. •  User can always re-send chat that had failed in delivering. Also, u

ser can go back to edit image/video page from ‘selecting friends to send to’ page and come back with saved selection made by user before going back.

Weakness Visibility of the system status •  The current location within the overall map of the application is n

ot displayed. •  At the default screen, it is almost impossible to figure out how to

move to another menu because there are no implications and bottom buttons are unclear.

Recognition rather than recall •  Accessible menus and menus’ icons are different depending on t

hrough which way the user got to the page. •  Story editing menu icon is hidden. •  Many of the buttons’ icons are not intuitive and rather confusing.


29

Evaluation

Task List

1.  Sign up / log in and read the snap from “Team snapchat”.

2.  Add a new friend by typing the friend’s ID.

3.  Take a snap, add filter, set the time limit to 5 seconds and send it to a friend.

4.  Take a video, draw something, select a friend to send it to, go back and erase the drawing and then send it

to the selected friend.

5.  Send a chat with only text and check the time the text is sent on the chat page.

6.  Take a snap, add text, save it to your device and add it to your story.

7.  Delete a photo on your story.

8.  Edit display name of a friend on your friend list.

9.  Send an image to a friend from your gallery.

10.  Go to setting menu and set ‘share stories to’ option as custom.


30

Evaluation

Task 1: Sign up / log in and read the snap from “Team snapchat”

Type email address and Password

Select your birthday Press sign up Type a username Press continue Press log in

Press send via SMS Type verification code Press verify Press images containing a ghost

Press done Press verify

Pros Gray Zone Cons Verification process is too long.


31

Evaluation

Task 1: Sign up / log in and read the snap from “Team snapchat”

•  User can add friends in his / her contacts selectively.

•  Tutorial is fun.

Press okay Select friends to add in your contacts

Press continue Press the red squircle Press and hold on to Team Snapchat grid

Press continue

Pros Gray Zone Cons

Read the message from Team Snapchat

Watch video from Team Snapchat

•  Guide in tutorial is too brief. •  There is no additional directions or help for first

time users who might need / want them.


32

Evaluation

Task 2: Add a new friend by typing the friend’s ID

Press the upper right icon Press the search icon Type friend’s ID Press plus icon Swipe left or press the icon with three lines

Press search icon Type friend’s ID Press plus icon

Pros Gray Zone Cons

1

2

Swipe left or press the icon with three lines

•  Users can add friends by searching with ID. •  Because there are two ways to add a friend, it may be confuse some users.

•  The icon for ‘My Friends’ menu is hard to recognize.


33

Evaluation

Task 3: Take a snap, add filter, set the time limit to 5 seconds and send it to a friend

Swipe left or right Press ‘I want Filters’ Press the box next to Filters Press Okay Press the circle

Press the check box for filters and press cancel b

utton on device

Press the bottom right button

Pros Gray Zone Cons

Press physical cancel button

Select a friend to send the snap to


Press the check box for GPS

Swipe left or right

•  Instructions are present to help first-time users regarding how to add a caption.

•  User has to turn on GPS to use filters. •  There is no instructions or implication regarding

how to use filters.


34

Evaluation

Task 3: Take a snap, add filter, set the time limit to 5 seconds and send it to a friend

User is moved to the chat list page

Pros Gray Zone Cons •  It is almost impossible to understand what those

icons in front of chat lists mean.


35

Evaluation

Task 4: Take a video, draw something, select a friend to send it to, go back and erase the drawing and then send it to the selected friend.

Keep holding and take your finger off when video

recording is done

Press pencil icon Draw something and press bottom right icon

Press the cancel button or top left ‘Send To…’

Press and hold the circle button

Pros Gray Zone Cons

User is moved to the chat list page

Press curved arrow icon

Press the bottom right icon

Press the bottom right icon

•  User can not add caption or drawings on certain scene of the recorded video.

•  User has can not erase drawings but can only undo it.

•  User can go back and forth freely without no burden regarding loss of entered information


36

Evaluation

Task 5: Send a chat with only text and check the time the text is sent on the chat page.

Swipe the area where the friend’s name is on

Type text in the bottom blank box and press send

button on keypad

Swipe left or press square button

Pros Gray Zone Cons

Swipe the screen right and hold to check the time

message is sent

•  Icon for chat list menu is hard to recognize. •  To enter a chat screen with a friend, user has to swipe

at the corresponding list area instead of tapping. •  Sending message is performed by different send

button compared to sending snap. •  Way to check time of the messages or snaps sent is

hidden.


37

Evaluation

Task 6: Take a snap, add text, save it to your device and add it to your story

Tap the screen Type Press cancel or tap empty space and press icon n

ext to stop watch

Press second icon from stop watch and

Press the circle

There is time limit in the snap uploaded

There is no time limit

Pros Gray Zone Cons

Hold the photo next to user’s ID

Press add

Tap the photo next to user’s ID and hold the phot

o below

1

2

•  Icon for saving snap and adding to my story is hard to recognize.

•  Saving chat and Add to story menu is only accessible from default camera screen.

•  User can not send the snap after adding it to my story. •  According to the ways of approach time limit of the

story exists and disappears.


38

Evaluation

Task 7: Delete a photo on your story

Press either the photo or user name

Press the photo under the username

Press the setting icon for the photo in my story

Press delete button Swipe left or press the bottom right icon

Pros Gray Zone Cons

Pop-up notifies the user that it is deleted

•  The setting menu icon for editing name is hidden.

•  The setting menu icon for editing my story is hidden.

•  Pop-up tells the result of a task.


39

Evaluation

Task 8: Edit display name of a friend on your friend list

Press the setting icon Press ‘Edit display name’ Type edited name and press save

Press a friend’s name

Pros Gray Zone Cons •  The setting menu icon for editing friends is

hidden. •  To edit settings regarding friends, user has to do

one by one, instead of blocking several friends at once, for example.


40

Evaluation

Task 9: Send a image to a friend from your gallery

Swipe on a chat list with friend



Select a folder Swipe right or press the bottom left icon

Pros Gray Zone Cons

Select a photo

Sending is in procedure The picture is sent Press the bottom right icon

•  Snapchat sending button in chat screen is hard to recognize.

•  Sending snap from saved photo on device is only accessible via chat screen.

•  User can send snap with saved photo on device.

•  User can view sent snaps.


41

Evaluation

Task 10: Go to setting menu and set ‘share stories to’ option as custom

Press the top right icon Press ‘Share stories to…’ Press ‘Custom’ Press the check box of a friend to block

Swipe right or press the bottom left icon

Pros Gray Zone Cons

The friend is blocked from seeing your story

•  Location of setting menu is irrelevant. •  Custom setting for story menu is unclear in regar

ds of blocking friends checked or blocking bothpeople who are not friends and checked friends.

•  User can customize openness of his / her story. •  The icon for blocked friends is intuitive owing to

its color and shape.


42

Evaluation

Cognitive Walkthrough Result

# Task Problem

1 Sign up / log in and read the snap from “Team snapchat”.

•  Verification process is too long. •  Guide in tutorial is too brief. •  There is no additional directions or help for first time users who might need / want them.

2 Add a new friend by typing the friend’s ID.

•  Because there are two ways to add a friend, it may be confuse some users. •  The icon for ‘My Friends’ menu is hard to recognize

3 Take a snap, add filter, set the time limit to 5 seconds and send it to a friend.

•  User has to turn on GPS to use filters. •  There is no instructions or implication regarding how to use filters. •  It is almost impossible to understand what those icons in front of chat lists mean.

4

Take a video, draw something, select a friend to send it to, go back and erase the drawing and then send it to the selected friend.

•  User can not add caption or drawings on certain scene of the recorded video. •  User has can not erase drawings but can only undo it.

5 Send a chat with only text and check the time the text is sent on the chat page.

•  Icon for chat list menu is hard to recognize. •  To enter a chat screen with a friend, user has to swipe at the corresponding list area instea

d of tapping. •  Sending message is performed by different send button compared to sending snap. •  Way to check time of the messages or snaps sent is hidden.

6 Take a snap, add text, save it to your device and add it to your story.

•  Icon for saving snap and adding to my story is hard to recognize. •  Saving chat and Add to story menu is only accessible from default camera screen. •  User can not send the snap after adding it to my story. •  According to the ways of approach time limit of the story exists and disappears.

7 Delete a photo on your story. •  The setting menu icon for editing name is hidden. •  The setting menu icon for editing my story is hidden.

8 Edit display name of a friend on your friend list.

•  The setting menu icon for editing friends is hidden. •  To edit settings regarding friends, user has to do one by one, instead of blocking several fri

ends at once, for example.

9 Send a image to a friend from your gallery.

•  Snapchat sending button in chat screen is hard to recognize. •  Sending snap from saved photo on device is only accessible via chat screen.

10 Go to setting menu and set ‘share stories to’ option as custom.

•  Location of setting menu is irrelevant. •  Custom setting for story menu is unclear in regards of blocking friends checked or blockin

g both people who are not friends and checked friends.

User Test

43

Evaluation

Card Sorting

Current Structure

Settings My account

User Test

44

Evaluation

Card Sorting

Novice User1

Manage # of Best friends Snapchatters who added me Video settings Log out Account actions My account Share stories to… Email Mobile number Support Term of use Join snapchat beta Privacy policy Snapchatters in my contacts Additional services More information Settings Receive snaps from… Notification settings Advanced Privacy

Camera My Friends Find Friends

Chat List Settin

gs

My accou

nt

Email

Mobile

Numb

er

Additional

Servic

es

# of Best

Friend

s

Privacy

Share stories to…

Receive

snaps

from…

Advanced

Notification Settin

gs Video Settin

gs

Join Snapc

hat

Beta

Privacy

Policy

Term of Use

Account

Action

s

More Information

Support

Log out

Chat List

My Friend

s Chat List

My Friend

s

Snapchatters in my

contacts

Search

Snapchatters who

added me

Current Structure

Cards

Video Settings

Manage # of Best friends

Snapchatters who added

me

Log out

Snapchatters in my

contacts

Receive snaps from…

Privacy policy

Privacy

Additional services

More information

Settings

Support Term of use

Join Snapchat

beta Advanced Notification

settings

Account Actions My Account

Share stories to…

Email

Mobile Number

Join Snapchat…

My Information Settings

User Test

45

Evaluation

Card Sorting

Novice User2



Chat List Settin

gs

My accou

nt

Email

Mobile

Numb

er

Additional

Servic

es

# of Best

Friend

s

Privacy

Share stories to…

Receive

snaps

from…

Advanced

Notification Settin

gs Video Settin

gs

Join Snapc

hat

Beta

Privacy

Policy

Term of Use

Account

Action

s

More Information

Support

Log out

Chat List

My Friend

s Chat List

My Friend

s

Snapchatters in my

contacts

Search

Snapchatters who

added me

Current Structure

Cards

Video Settings



me

Log out

Snapchatters in my

contacts

Additional services

Settings


More information Support Term of use

Privacy policy Privacy Notification

settings Account Actions

My Account

Share stories to…

Email Mobile Number

Join Snapchat…

Join Snapchat

beta Advanced

안내 My page

User Test

46

Evaluation

Card Sorting

Intermediate User1



Chat List Settin

gs

My accou

nt

Email

Mobile

Numb

er

Additional

Servic

es

# of Best

Friend

s

Privacy

Share stories to…

Receive

snaps

from…

Advanced

Notification Settin

gs Video Settin

gs

Join Snapc

hat

Beta

Privacy

Policy

Term of Use

Account

Action

s

More Information

Support

Log out

Chat List

My Friend

s Chat List

My Friend

s

Snapchatters in my

contacts

Search

Snapchatters who

added me

Current Structure

Cards

Video Settings



me

Log in / Log out

Log out

Account Actions My Account

Share stories to… Email

Mobile Number

Snapchatters in my

contacts

Additional services

More information Settings


Support Term of use

Join Snapchat

beta

Privacy policy

설정

Advanced

Privacy

Notification settings

Setting

User Test

47

Evaluation

Card Sorting

Intermediate User2



Chat List Settin

gs

My accou

nt

Email

Mobile

Numb

er

Additional

Servic

es

# of Best

Friend

s

Privacy

Share stories to…

Receive

snaps

from…

Advanced

Notification Settin

gs Video Settin

gs

Join Snapc

hat

Beta

Privacy

Policy

Term of Use

Account

Action

s

More Information

Support

Log out

Chat List

My Friend

s Chat List

My Friend

s

Snapchatters in my

contacts

Search

Snapchatters who

added me

Current Structure

Cards

Video Settings



me

Share stories to…

Email

Mobile Number

Snapchatters in my

contacts


Log out Account Actions My Account Additional

services


Support

Term of use Join

Snapchat beta

Privacy policy

Advanced Privacy Notification settings

Setting

User Test

48

Evaluation

Card Sorting

Expert User



Chat List Settin

gs

My accou

nt

Email

Mobile

Numb

er

Additional

Servic

es

# of Best

Friend

s

Privacy

Share stories to…

Receive

snaps

from…

Advanced

Notification Settin

gs Video Settin

gs

Join Snapc

hat

Beta

Privacy

Policy

Term of Use

Account

Action

s

More Information

Support

Log out

Chat List

My Friend

s Chat List

My Friend

s

Snapchatters in my

contacts

Search

Snapchatters who

added me

Current Structure

Cards

Video Settings



me

Share stories to…

Email

Mobile Number

Snapchatters in my

contacts


Log out Account Actions My Account Additional

services


Support

Term of use Join

Snapchat beta

Privacy policy

Advanced Privacy Notification settings

Advanced

Privacy

Settings

Share stories to…


Camera

User Test

49

Evaluation

Card Sorting – Result Analysis

Novice 1 Novice 2 Intermediate 1 Intermediate 2 Expert

My Friends

Find Friends


Smapchatters who added me

Video Settings

Snapchatters who added me Snapchatters who added me

Snapchatters in my contacts Snapchatters in my contacts

Chat List Share stories to…

Support

Notification Settings

Advanced

Term of Use Term of Use

More Information More Information

Advanced Advanced

Additional Services Additional Services

Privacy Policy Additional Services

User Test

50

Evaluation

Pre Questionnaire

User Test

51

Evaluation

Pre Questionnaire

Novice User Novice User Intermediate User

Gender / Age

Minsun Kim Sunghyun Nam Jieun Yoon

Female / 22 Male / 25 Female / 27

Instant Messaging Service Usage 카카오톡, 페이스북 메신져, What's app 카카오톡 카카오톡, 페이스북 메신져, Snapchat

Three times a week Everyday Everyday Instant Messaging Service

Usage Frequency

Main Purpose of Usage For messaging (text only message), For

sharing images

For messaging (text only message), For

sharing images

For messaging (text only message), For

video calls, For sharing images

Main Reason for Usage Popularity among friends and

acquaintances, usability

Popularity among friends and

acquaintances, easy installing, usability,

useful functions

Popularity among friends and

acquaintances, usability

User Test

52

Evaluation

Pre Questionnaire


How do you share images with friends?


Do you apply effects before sharing images? No No

Yes

필터(흑백, 글로시, 석양 등), 얼굴 성형,

채도 및 대비 조절

Yes, few times No No

Self evaluation on Snapchat

어떤 카테고리 안에 무슨 기능이 있는지 잘 모르겠다. 사진 전송 이외에 다른 부가적 기능을 쉽게 사용하기 어렵다. 계속 뒤져보는데 잘 모르겠다 헤매게 된다.

Send saved image on device Send saved image on device Send saved image on device

Have you ever used Snapchat?

2/7

User Test

53

Evaluation

Task List




4.  Take a video, draw something, select a friend to send it to, go back and erase the drawing and then send it

to the selected friend.

5.  Send a chat with only text and check the time the text is sent on the chat page.

6.  Take a snap, add text, save it to your device and add it to your story.

7.  Delete a photo on your story.

8.  Edit display name of a friend on your friend list.

9.  Send an image to a friend from your gallery.

10.  Go to setting menu and set ‘share stories to’ option as custom.

User Test

54

Evaluation

Task Performance Minsun Kim / Novice

1.

Step # Process Time Think Aloud Error / Problem found

00:34

2.

The reason why Snapchat asks for users’ birthday is not known.

Typing a username 00:10

Waiting for SMS to come, and checking the SMS, typing the verification code and pressing verify

4. 00:35

Typing her phone numeber and pressing verify and pressing send via SMS on the pop-up

3. 00:15

5. Selecting all images containing a ghost to verify account

00:14 생일을 꼭 해야해?

00:19 Task 1. Sign up / log in and read the snap from “Team snapchat”

Pressing join, typing email, password and birthday, and then pressing sign up 00:33 어? 여기 내 얼굴도 나오네?

00:50 Verify account가 이래? Verification takes some time since user has to receive an SMS and type the verification number but verification time limit, 60 seconds, is too short.

Verification process is too long.

User Test

55

Evaluation


6.


00:25

00:10 7.

Task 1. Sign up / log in and read the snap from “Team snapchat”

Reading the descr ipt ions on regarding ho Snpachat uses the phone numbers in users’ address book and pressing continue and then pressing okay on the pop-up

Selecting a Snapchat user iher address book

00:25 8. Pressing the top left flash button twice and pressing the three lines button and then swiping left, right, left right and left to camera screen.

01:49 팀스냅챗으로부터 온 스냅을 읽으세요?

02:03 Where can I find chat..

Pressing the bottom left button and then tapping the chat list with Team Snapchat, pressing and holding and the swiping on the chat list.

02:10 Press and hold to… 9.

Pressing and holding on Snaps in the chat sc reen w i th Team Snapchat and viewing all the four snaps from Team Snapchat.

10. 00:14

00:06

02:20 근데 이걸 다 읽어야돼? Because the tutorial for Snapchat was too long, user was reluctant to read all the snaps.

User Test

56

Evaluation


1.


00:10

00:07 2.

Pressing the top left area where the chatter’s name and arrow is

Pressing cancel button at chat list and moving to camera screen and then pressing three lines button

00:09 5. Pressing the Snapchat area and

Pressing search icon and then pressing left arrow to exit search menu at find friends menu

6.

Pressing search icon at my friends menu and pressing left arrow

7. 00:06

00:08

Task 2. Add a new friend by typing the friend’s ID.

Moving back to chat list button is place on the top left but the screen actually moves left from right. The button should be placed on the right. And pressing settings icon, and then

exiting out from settings menu

Although user can move between menus by swiping, first time users may not know because there is no indication.

Pressing settings icon and exiting out

03:30 검색… 이렇게 하는거야? 아니지?

3. 00:12

03:36 어디로 가면 찾을 수 있을까…

00:03

03:42 아!

4.

Pressing my friends button and then pressing squircle on the bottom left side and pressing search icon in chat list page

pressing three lines icon and then pressing add friends icon

Button that moves the user to camera screen is placed on top left side when the screen actually moves left from right.

03:53 여기사 찾는거 아닌가? ID로 찾기 어디로 가야되지?

Pressing search icon and entering ID to add a new friend is not a well designed process because the search icon would be conceived as something that is only for searching.

Moving to camera screen, back to my friends menu and to find friends menu

8. 00:09

User Test

57

Evaluation


9.


00:06

00:04 10.

Pressing icon for snpchatters in my contacts and snapchatters who added me successively and then pressing search icon.

Exiting out from search menu, moving back to my friends menu and then back to find friends menu


Moving back to chat list button is place on the top left but the screen actually moves left from right. The button should be placed on the right.

Although user can move between menus by swiping, first time users may not know because there is no indication.

Moving left and right between menus and then moving back to find friends menu

04:10 이건 내 연락처에서 찾는…

11. 00:12 04:30 ID로 찾는 것 어려워요…

00:12 12.

Pressing search icon and exiting out and moving to my friends menu and then to camera screen

04:30 (As she presses find friends icon..) 이걸 누르면 그게 있어야지… 옵션이 있던가…

Moving back and forth between find friends and my friends menu and pressing search icon on find friends menu page

00:10 05:30 모르겠는데…? 어째…? 13. Failed to add a new friend with the friend’s ID.

User Test

58

Evaluation


1.


00:05

00:10 2.

Pressing cancel twice to camera screen

Pressing circle button on camera screen, taking a snap and watching the replay of recorded video and then pressing cancel twice and accidently closed Snapchat

It is unclear to the user why Snapchat needs to access the user’s location to activate filter option.

Reopening Snapchat and taking a snap

05:33 Time limit도 있어?

00:10

00:15

3.

Swiping the screen and pressing on ‘turn on filters’ and then pressing the button ‘I want filters’

00:08 6.

Task 3. Take a snap, add filter, set the time limit to 5 seconds and send it to a friend.

05:35 어? 이거 비디오야?

05:38 닫혀버렸어…

Pressing stopwatch icon and setting the time limit to 5 seconds

00:13 4.

5. Pressing saving icon and add to story icon

Unless user swipes the screen the filter menu is hidden and there is no instruction or buttons for filters.

Pressing the check box for ‘Front-Facing Flash’ and then check box for ‘Filters’ and pressing okay to the pop-up that says ‘Snapchat would like to access your current location’

00:08 7. 06:34 왜애..?

06:49 꺼진거야 설마?? Pressing moving back button on the top left in Android location service menu and pressing cancel and then reopening Snapchat

8. Snapchat closed accidently: when user presses cancel button at the location service menu, it was supposed to return to additional services menu of Snapchat.

06:53 아아.. 왜꺼지는데…ㅋㅋ

00:15

Pressing left arrow on the top and following the instruction on the center of the screen: swiping for filters

9. 07:01 다시해야돼 설마…? 아 아니다! 됐다!

07:08 아아.. 이런 효과를 넣을 수 있는 거구나

00:14

Pressing send button, selecting a friend and pressing send button again

10. 00:10

User Test

59

Evaluation


1.


00:03

00:10 2.

Pressing the top left area to go to camera screen

Pressing and holding circle button

Watching the recorded video and pressing pencil icon and drawing something

00:13

00:08

3.

07:30 Take a video는 아.. 이렇게 길게 누르면 되는거야?

Pressing send button and selecting a friend and then pressing ‘Send to…’ button on the top left

00:10 4.

5. Pressing the arrow next pencil icon, pressing send button and then pressing send button again

Task 4. Take a video, draw something, select a friend to send it to, go back and erase the drawing and then send it to the selected friend.

Recording a video is not available in button but only available by action – holding. It is hard to know how to record a video for novice user.

User Test

60

Evaluation


1.


00:09

00:10 2.

Tapping on the chat list, swiping on the chat list and holding, tapping on the chat list again and then swiping

00:06 3.

07:53 어..?

Dragging the top menu bar of Android system a few times and exiting out from chat screen, tapping on chat list and then swiping to get in and then holding on sent message

00:12 4. Task 5. Send a chat with only text and check the time the text is sent on the chat page.

Although she swiped correctly to enter the chat list and saw the chat screen, she was unsure.

Typing on the blank box and pressing yellow button next to it and then pressing cancel button when she saw camera screen with caption she typed

Pressing the blank box again for the keypads to appear and pressing ‘전송’ button on the keypads

Tapping on sent message several times and then swiping on the screen

00:13 5. 08:24 어! 여기 있다! The time messages are sent is hidden and user has to swipe to check the time. It should be marked somewhere visible.

User Test

61

Evaluation


1.


00:06

00:07 2.

Swiping on the chat list and then swiping left twice to move back to camera screen

00:14 3.

Pressing the check box for ‘My Story’ and pressing add and pressing send button

00:12 4.

Pressing circle button, pressing add to story button, save to device button

Pressing on screen, typing, and pressing saving icon, and then pressing send button

After pressing add on the pop-up, Task 6. Take a snap, add text, save it to your device and add it to your story.

Because how to add caption is not instructed anymore once the user has sent a snap, it is hard to figure out how to add caption. There should be indication, either image, icon or text, to help user add caption as well as filters.

user has to press the send button again.

User Test

62

Evaluation


1.


00:06

00:05 2.

Pressing on her ID, pressing on the text and image underneath it

Pressing setting icon and pressing delete button on the pop-up

Task 7. Delete a photo on your story.

User Test

63

Evaluation


1.


00:05

00:07 2.

Pressing friend’s ID, and pressing on setting icon

Pressing on the type box and typing, and then pressing save button

Task 8. Edit display name of a friend on your friend list.

User Test

64

Evaluation


1.


00:04

00:12 2.

Pressing friend’s ID, and pressing on setting icon and cancel button

Pressing my friends button, pressing cancel button and reopening Snapchat

Task 9. Send an image to a friend from your gallery.

User kept closing Snapchat by pressing cancel button. There should something to stop the user f r o m c l o s i n g S n a p c h a t unintentionally.

09:25 왜 자꾸 나가?

00:09 3. Swiping right and swiping right on chat list, pressing the yellow button and then pressing squircle on the bottom right

00:15 4. Selecting a gallery and selecting a photo

It takes such a long time to load gallery, photos and brining the photo to camera screen.

00:03 5. Pressing send button

User Test

65

Evaluation


1.


00:03

00:08 2.

Pressing cancel button, pressing setting menu icon

Scrolling down and pressing on ‘Share stories to…’

10:03 음… 여기있다!

00:02 3. Pressing on custom on the pop up The user did not bother to read the instruction at the top that said ‘Block friends from seeing your Story’.

Task 10. Go to setting menu and set ‘share stories to’ option as custom.

10:05 됐다! 된거야??

00:06 4. Pressing the check box and then pressing the ‘Stories Privacy’ to exit out from the page

10:11 아아…! 됐어

User Test

66

Evaluation

Task Performance Sunghyun Nam / Novice

1.


00:34

00:15 2.

Pressing sign up button and typing email address, password, birthday and pressing sign up

Password had to be longer so retyping password and press sign up

00:51 으아… 비밀번호 8자리 눌러야돼

00:14 3. Typed in user name and pressed ‘완료’ button on keypad but nothing happened so pressed type box again and re-pressed ‘완료’

Nothing happened when he pressed completion button, maybe because the user name is too short, but because there is no descriptions explaining why, it confused the user.

01:05 완료가 안되는데?

00:20 4. Retyping another user name, pressing continue, and pressing verify on verify number page and then pressing send via SMS on the pop-up


00:22 5. Checking the SMS and typing verification code and then pressing verify button

00:24 6. Pressing any image and pressing done

02:28 Ghost? Ghost가 뭐야? Did not understood the instruction that sa id ‘Se lect a l l images containing a ghost.’ 02:50 무슨 말인지 모르겠어

00:20 7. (Instructions told the user ‘You did’nt identify all of the images. Please try again.’) Selecting all the images containing ghost and pressing done

03:03 아!~ 이 귀신 말하는거야? 미친…

00:05 8. Pressing continue and pressing don’t allow

User Test

67

Evaluation


1.


00:13

00:20 2.

Swiping right and pressing search icon and typing ID on search bar

Pressing ‘X’ shaped button on the right and pressing snapchat button, pressing cancel and reopening the Snapchat

00:15 3. 01:05 완료가 안되는데?

00:12 4. Pressing plus icon and tapping on the friend’s ID several times in a row


03:38 엔터가 없어

Pressing three lines icon, pressing search icon and typing ID

Because there is no confirmation pop-up or notification, user kept tapping on the ID expecting for something to tell him that the friend is added.

User Test

68

Evaluation


1.


00:05

00:06 2.

Pressing cancel three times to move to camera screen

Pressing three lines icon, pressing cancel button and pressing squircle on the left and then pressing cancel again to camera screen

00:09 3.

00:07 4. Pressing pencil button, drawing something and pressing arrow shaped button

Pressing the circle and pressing add to story button, save button


04:34 Filter?

04:40 아닌데…

00:04 5. Pressing stopwatch and pressing cancel button

04:43 이건 타이머고…

00:05 6. Pressing add to story again and pressing cancel button on the pop-up

00:05 7. Pressing send button and pressing send to… button to go back

00:07 8. Swiping and pressing ‘I want Filters’, and check box for filters

00:13 9. Pressing okay in the pop-up and pressing ‘내 위치 정보 사용’ check box, then pressing ‘동의함’ and then press cancel

00:05 10. Pressing cancel again and swiping and pressing send button

00:03 11. Selecting a friend and press send

Unless user swipes the screen the filter menu is hidden and there is no instruction or buttons for filters.

User Test

69

Evaluation


1.


00:07

00:05 2.

Pressing cancel to camera screen and press switch camera and then swipe right

Swiping left and pressing switch camera and then swiping left

00:09 3.

00:06 4. Pressing cancel and then swiping left three times and then right two times

Pressing my friends and swipe right and then pressing search menu and setting menu scrolling down

00:03 5. Pressing the circle button for a second

06:49 어..? 어떻게 된 것 같은데…?

00:10 6. Holding the circle button and press send button

00:10 7. Pressing cancel and pressing pencil icon and then drawing something

00:06 8. Pressing send button and cancel button after selecting a friend to send it to

00:09 9. Pressing arrow next to pencil icon and pressing send button and then pressing send button again


06:19 비디오가 어디있어 Recording a video is not available in button but only available by action – holding-, it is hard to know how to record a video for novice user.

User Test

70

Evaluation


1.


00:04 Tapping the chat list twice and then swiping

00:04 2. Swiping on the sent chat twice

00:08 3.

00:06 4. Pressing on a friend’s ID and pressing score and then setting icon

Pressing the arrow on the top left and swipe twice to my friends menu

00:05 5. Swiping right three times to chat list menu

00:05 6. Holding on chat list and swiping right and then left

00:07 7. Swiping on the chat list tap, and repeating it again

00:06 8. Swiping on chat list and tapping on blank box with ‘Send a chat’ at the bottom and type

00:11 9. Pressing the yellow button and pressing cancel button and then pressing ‘전송’

Task 5. Send a chat with only text and check the time the text is sent on the chat page. 08:42 아! Send a chat!

00:07 10. Tapping on the message several times to check the time

00:10 11. Pressing the yellow button and swiping right and then pressing cancel

09:20 아 시간 어떻게 보지?

09:33 아 모르겠어…

The time messages are sent is hidden and user has to swipe to check the time. It should be marked somewhere visible.

User Test

71

Evaluation


1.


00:05

00:10 2. Pressing circle button and pressing save to device button and then swiping

Pressing cancel twice and swiping left

00:03 3.

00:06 4. Pressing pencil button and holding on pencil button and pressing pencil button again

Pressing send button and pressing cancel

00:13 5. Tapping on the screen and tapping on the caption again and typing and pressing ‘완료’

00:04 6. Pressing save it to device button and pressing cancel

00:14 7. Swiping right and pressing setting menu icon, pressing cancel and then re-entering and exiting setting menu again

00:11 8. Pressing cancel once to camera screen and pressing three lines icon to my friends menu and swiping right twice to chat list

Pressing cancel to camera and swiping right to chat list, pressing cancel button and then pressing three lines icon and my friends button

00:12 9.

00:26 10. Pressing cancel and reopening Snapchat going to my friends menu and tapping his ID a few times… He kept wander ing around the application for a while…

Task 6. Take a snap, add text, save it to your device and add it to your story.

10:15 음…? 찾았다

Unintentional exits occur frequently as there is nothing to prevent the user from closing the application.

The user may not have even guessed that the send menu inside the chat list is different from default one

User Test

Evaluation

Task Performance Sunghyun Nam / Novice Step # Process Time Think Aloud Error / Problem found


Because task6 was not performed, task 7 could not be performed

User Test

73

Evaluation


1.


00:06

00:10 2. Press edit display name on the pop-up and type new name and then press save

Tapping on friend’s ID three times and pressing setting icon


User Test

74

Evaluation


1.


00:05

00:07 2. Press cancel and swipe right twice

Pressing on a friend’s ID and pressing setting icon

00:07 3.

00:07 4. Press blank box at the bottom and press cancel

Tap five times on chat list and swipe

00:15 5. Pressing home button on the device, entering gallery, and a photo album and then holding on a photo

00:06 6. Pressing cancel button and then pressing home button

00:09 7. Reopening Snapchat and moving the finger around the screen and tapping on sent messages

00:03 8. Pressing cancel to exit from chat screen to chat list

Going into settings menu and carefully looking through the listed menus

00:12 9.

00:11 10. Pressing ‘Receive Snaps from…’ and pressing cancel button twice, returning back to chat list


13:07 아 연동되어 있는게 아닌가…?

00:06 11. Pressing cancel and holding circle button on the camera screen

13:50 앨범… 이게 아니라…

00:06 12. Pressing cancel to exit and pressing three lines icon to my friends menu and swipe left to find friends menu

00:03 13. Swipe right three times to chat list 14:06 없는 것 아니야…? Because sending a snap from g a l l e r y m e n u i c o n i s o n l y accessible through chat screen sending button, and inaccessible from default camera screen, it may cause confusion.

User Test

75

Evaluation


1.


00:08

00:06 2.

Swiping left three times and pressing Snapchatters in my contacts and then pressing `Snapchatters who added me

00:03 3.

00:07 4. Pressing ‘Share stories to…’ and pressing custom on the pop-up

00:04 6. Press ing cancel f rom ‘Stor ies Privacy’ menu


Swiping right three times and pressing settings icon

Swiping right three times and pressing settings icon

15:05 아하! 됐어! When the user tapped on custom option, the user was moved to ‘Stories Privacy’ menu and from there she was supposed to block friends from seeing her story as it is instructed at the top of the page, but he did not bother to read the instructions, maybe because either it is in English or it is to long.

User Test

76

Evaluation

Task Performance Jieun Yoon / Intermediate

1. Pressing log in, typing ID and password and then pressing log in button

Step #


Process Time Think Aloud

00:25

Pressing the bottom left squircle button at default camera screen

00:05

Tapping the chat list with Team Snapchat, and fol lowing the instruction, which appeared and said “swipe right to chat”

00:07

2.

3.

Error / Problem found

User Test

77

Evaluation


1. Swiping right to exit from chat screen

Step #


Process Time Think Aloud Error / Problem found

00:02

2. Swiping right twice to move to friends menu

00:02

00:17 3.

Pressing search icon, typing friends ID, pressing on friends ID several times, and then pressing on the plus icon next to the friend’s ID to add the friend

00:02 4. Pressing the refresh icon on the top right corner

Although there is change in shape of plus icon, because there is no confirmation that tells the user that friend is added to the user’s friend list, user may not be sure whether the task is completed correctly.

01:36

됐어…? Staring at the screen and tapping on the friend’s ID once again but it only shows the friend’s scores

00:07 5.

01:42 됐다. Pressing refresh icon, pressing physical menu on the device and pressing cancel button on the device

00:11 6.

01:47 응..?

Search Button

Refresh Button

Plus button

User Test

78

Evaluation


1.

Swiping left and tapping the circle icon on camera screen

Step #



00:05

2. Swiping right at the screen that showed taken photo and pressing ‘Turn on filters’ button

00:06

00:05 3. Tapping check box for filters at the additional services screen

User seemed to be confused when she was moved to additional services page from the camera screen and thus was looking for the menu for performing the task 3.

02:15 필터…

User Test

79

Evaluation


4.

Step #



00:05 7. Swiping right twice and then pressing ‘Turn on Filters’ button again

The user did not understand why Snapchat would like to access her c u r r e n t l o c a t i o n w h e n s h e activated filter function.

02:24 에엥..?

Reading the pop-up, which said ‘Snapchat would like to access your current location, and pressing ‘Don’t Allow’

00:07

9.

02:19 노우…

Pressing the check box for special text

5. 00:04

00:04 02:29 뭐지…? Pressing the arrow at top left corner to go back to previous camera screen

6.

02:35 필터 어떻게 하지…?

00:08 Staring at the additional services page for a moment

8.

00:03 Pressing the check box for filters and pressing ‘okay’ on the pop-up that appears

Observing the location services menu of the Android device, to which she was moved, and pressing cancel button

00:04 02:50 에엥? 10.

User Test

80

Evaluation


11.

Step #



03:00 어어… 됐다..

Pressing the top left arrow again to go back and pressing the icon on the bottom for different function and then pressing cancel button again

00:05

Swiping right again 12. 00:02

03:02 아하!! 아까~ 그거 오케이 해야 되는구나~

00:04 Pressing the bottom right button to send, selecting a friend from the list and then pressing the bottom right button again

13.

User Test

81

Evaluation


1.

Step #



Pressing cancel button to go back to camera screen from chat list menu

00:02

Staring at the camera screen, swiping right and then swiping left to go back to camera screen

2. 00:05

00:02 Holding the circular button for a second or two – but pop-up informs the user that video recording failed

3.

Holding the circular button again and taking the finger tip off and then looking at the screen

03:55 찍힌건가? 4. 00:15 User was not sure whether the video has been recorded even though the recorded video was being replayed. Thus it seems like there should be a sign that tells users the video is being replayed.

Pressing the pencil shaped icon at the top left corner and choosing a color and then drawing something

5. 00:06

User Test

82

Evaluation


6.

Step #



Pressing bottom right send button, selecting a friend to send it to, and then pressing cancel button to go back

00:05

Pressing the curved arrow on at the top and pressing the send button and then pressing the send button again at the ‘Send to…’ menu

7. 00:06

User Test

83

Evaluation


1.

Step #

Task 5. Send a chat with only text and check the time the text is sent on the chat page.


Tapping on the chat list, swiping left and then swiping right to come back to chat list menu

00:06

Going back and forth between chat list menu, camera screen, and my friends menu, looking for the right button

2. 00:13

05:28 으으음…

05:32 텍스트만 어떻게 보내지?

Pressing purple squircle button with 2 written on it at the bottom right button and swiping right to camera screen

00:02 3. The number marked on the squircle is hard to know what it stands for even when user presses the icon.

Pressing top right icon at the camera screen and press ing squircle button at the bottom left successively

00:03 4. Because there is no button for sending a text only chat, user may get lost looking for a short cut or the button.

Tapping a chat list again, and then swiping on the chat list with a friend

00:03 5.

06:03 으응 Tapping on the black box at the bottom and typing text, and then pressing ‘전송’ on the keypad

6. 00:09

06:30 Check time 못하겠어… 여기서 하는거야…?

Tapping on the top left area, going back to chat list menu, and tapping on the chat list and then swiping again to get in

Even though the user knows how to get into the chat screen, she kept tapping instead of swiping. It may be because tapping action is more comfortable or habitual for users.

7. 00:06

Going back to chat list and tapping and then swiping again to go back to chat screen

8.

Moving back to chat list and tapping the list and checking the text that appears and says ‘1분 전’

9.

00:06

00:03 07:20 이렇게.. 으음.. 어엉.. She did not know how to check time because it appears only when the user swipes right at the chat screen.

User Test

84

Evaluation


1.

Step #

Task 6. Take a snap, add text, save it to your device and add it to your story.


Swiping left to camera screen and pressing the circle

00:06

Pressing on the taken photo and typing and then pressing the bottom button to add it to her story 2.

00:11

07:26 으응 나 이거 할 수 있어

00:04 3. Pressing Add on the pop-up and looking at the my friends menu screen after user is moved to my friends menu

07:52 했어! She omitted saving task.

Add to my story button

User Test

85

Evaluation


1.

Step #



Pressing the circular photo infront of her ID at my friends page, and pressing and holding on the photo that shows underneath her ID

00:04

2.

3.

4.

Pressing gear shaped icon on the right to her ID and exiting back to the my friends menu

00:05

Pressing on upper circular photo and lower circular photo wondering how to delete the photo

5.

00:18

00:07 08:43 내 페이지가 따로 있나?

00:06 Holding on the photo next to her ID and taking her finger off and repeating the action again.

08:16 어떻게 지우지…?

08:36 이거 어떻게 지워…?

Swiping left, swiping left again, swiping right, back to my friends menu and then swiping right and back to my friends menu

User Test

86

Evaluation


6.

Step #



Pressing the circular photo, pressing the gear icon next to the ID and exiting out from the pop-up

00:10

7.

8. Swiping right three times and swiping left twice to my friends men

Because the gear icon is hidden for the photo that appears after tapping on the ID or circular image next to the ID it is really hard to figure out how to delete the snap from my story.

00:15 09:18 어떻게 지워…?

08:53 이거..이거.. 왜 이름 수정하는 것 밖에 안나오지…?

Swiping left and pressing on phonebook shaped icon, which is the icon for snapchatters in my contacts

00:10

09:22 내..내가 찾아 내야돼?

Pressing the photo next to ID 00:02 9. 09:59 원래 이렇게 누르고 그러면 삭제.. 뭐 이런게 떠야하는 것 아닌가?

User Test

87

Evaluation


1.

Step #



Holding on a friends ID 00:03

2.

08:53 이거..이거.. 왜 이름 수정하는 것 밖에 안나오지…?

Tapping on a friends ID and pressing ‘Edit display name’

00:07

Typing another name on the blank box and pressing save button

3. 00:12

User Test

88

Evaluation


1.

Step #



Swiping right twice and swiping left three times and then swiping right twice again to camera screen

00:17

2.

Because sending a snap from g a l l e r y m e n u i c o n i s o n l y accessible through chat screen sending button, and inaccessible from default camera screen, it may cause confusion.

10:54 내 갤러리에 있는 사진도 보낼 수 있구나…

Pressing switch camera icon twice 00:02 11:02 아닌데 이건…

00:10 Swiping right once and swiping left three times and swiping back to camera screen

3.

Pressing three-lines icon 00:02 4. 11:33 모르겠어! 들어갈 수 있어?

11:40 없는데? 아이콘이? 없잖아… 여기(camera screen)있어야 되는거 아니야?

User Test

89

Evaluation


1.

Step #



Swiping right to chat list screen and then moving right to find friends menu

00:13

2.

When the user tapped on custom option, the user was moved to ‘Stories Privacy’ menu and from there she was supposed to block friends from seeing her story as it is instructed at the top of the page, but she did not bother to read the instructions, maybe because either it is in English or it is to long.

Swping right to my friends menu and tapping on the ID

00:12

Scroll down and up and then tapping ‘Share stories to…’ under privacy

4. 00:09

Swping right twice to chat list menu and tapping settings icon

3. 00:04

5. Tapping custom on the pop-up 12:53 했어! 00:02

User Test

90

Evaluation

Task Performance Results



# of Steps

Task 1: Join or Log in

Completion # of Steps Completion # of Steps Completion

10 O 3 O

6

13

7

O

O

O

Task 2: Add a friend with ID 13

10

5

O

O

X

Task 3: Snap with filter

Task 4: Video with drawing

8

4

11

9

O

O

O

O

Task 5: Text only chat & check time 5 O 11 X

Failed checking time 9 X Failed checking time

Task 6: Save to device and add to story X

Omitted saving task 3 4 O 10

X Failed adding to story

Had difficulty trying to 'add the snap to

his story'

Task 7: Delete a photo on your story

X Because task6 was not performed, task 7 c o u l d n o t b e performed

Task 8: Edit display name

2 O 9 X

Task 9: Send an image from gallery

3 O 2 O 2 O

4

X Had most difficulty

performing task and was totally lost

13

X Had most difficulty

performing task and was totally lost

5 O

Task 10: Set ‘Share stories to’ as custom

5

O However, omitted pressing the check

box for blocking specific users.

O However, omitted pressing the check

box for blocking specific users.

6 4 O

User Test

91

Evaluation

Post Questionnaire

User Test

92

Evaluation

Post Questionnaire



What was the most satisfying task?

Reason for such satisfaction •  It is easy to find buttons or menus for task

performance.

•  It is easy to recognize buttons for task

performance.

•  The result of the task was close to the one

I expected.




8. Edit display name of a friend on your frie nd list.

4.  Take a video, draw something, select a friend to send it to, go back and erase the drawing and then send it to the selected friend

10. Go to setting menu and set ‘share storie s to option as custom


5. Send a chat with only text and check th e time the text is sent on the chat page

6. Take a snap, add text, save it to your de vice and add it to your story

•  The function of the task is attractive

(outstanding)

•  The function of the task is attractive

(outstanding)

User Test

93

Evaluation

Post Questionnaire



What was the most dissatisfying task?

Reason for such dissatisfaction

6.  Take a snap, add text, save it to your de vice and add it to your story.

7. Delete a photo on your story. 9.  Send an image to a friend from your gall

ery. 10. Go to setting menu and set ‘share storie

s to’ option as custom.

6. Take a snap, add text, save it to your de vice and add it to your story. 9. Send an image to a friend from your gall ery.

2.  Add a new friend by typing the friend’s ID

3.  Take a snap, add filter, set the time limit to 5 seconds and send it to a friend

6. Take a snap, add text, save it to your dev ice and add it to your story

•  It is hard to find buttons or menus for task

performance.

•  It is hard to recognize buttons for task

performance.

•  Instruction that helps task performance is

either absent or ambiguous.

•  The result of the task was different from

the one I expected.


performance.

•  It is hard to recognize buttons for task

performance.

•  Instruction that helps task performance is

either absent or ambiguous.

•  The process to perform task is too long

and complicated.


performance.

•  The process to perform task is too long

and complicated.

•  동작들을 알기 힘들었다. 어떤 동작을 해야 원하는 화면이 나올지 모르겠다.

User Test

94

Evaluation

Post Questionnaire



Have you used Snapchat before?

What is your thought towards Snapchat?

What strength do Snapchat have compared to other similar

applications?

What weakness do Snapchat have compared to other similar

applications?

사진 찍어서 빨리 보낼 때 편리하다

Yes 안 좋다고 생각했는데 역시나 구체적인 테스크를 수행해 보니 더 불편한 점이 많았다. 아이콘이 왜 숨겨져 있나, 설명이 있었으면 좋겟다. 알기어려운 아이콘들… 주요기능에 대한 설명을 설정 전까지 인지 시켜 으면… 후에 궁금하면 바로 찾아 볼 수 있게…

카톡은 부가기능을 텍스트로 표시하여 설명해준다. 따라서 자주 쓰지 않는 기능이라도 쉽게 사용할 수 있다.

그리고 Snapchat은 사진을 보내다가 채팅을 하려고 하거나 직접 찍어 보내지 않고 갤러리 사진을 보낼 때 너무 헤매게된다.

No 답답한 어플리케이션 친절하지 않은 ui 뱅뱅도는듯한 기분

No 음.. 재미는 있지만 사용상 어려움이 많아서 잘 사용하지 않을 것 같다.

모르겠다 사진이나 동영상에 바로 글씨 쓰는 기능은 괜찮은 것 같다

색감과 여러 애니메이션 효과랑 재치 있는 화면 구성 전체적으로 재미있다.

로드무비와 비교했을 때 로그인 과정도 복잡하고 동작도 힘들었다.

사용 불편, 답답

Problem Summary

95

Problem Summary

Problems found from Heuristic Evaluation, Cognitive Walkthrough, Cardsorting, and User Test

# Problems

1 Hidden buttons Editing display name of friend Editing my story

2 Action problem

Swiping problem

Filters Moving between menus Moving to camera screen from chat screen Checking time of snap

Holding problem Taking a video Viewing received snaps

3 Unintuitive icons Snap status Default screen icons Snap buttons from chat screen

4 Inconsistency

Inconsistent buttons to press Sending text message from chat screen

Inconsistent menus’ location and accessibility

Menu icons in camera screen

5 Menu structure Results from card sorting Video settings

Manage # of best friends

6 Confirmation problem Adding friends

Intentions

Design Solution

96

Design Solution

Design solution intentions

Mood board & Color theme

Since Snapchat’s biggest advantage is its simple and iconic design, I aimed for keeping such strength while making the design more intuitive. Also Snapchat has simple information architectrue, and all the menus and tasks are accessible in short steps is another advantage. I intended to keep the structural simplicity as well.

Design Solution

97

Design Solution

Hidden buttons – Editing my story

Current Design

Design Solution

6WRU\�'HOHWHG

Bars on the side indicate that there is a hidden menu.

When user swipes on the bar, hidden menus, saving and deleting, appear.

Notification confirms that the task is performed well.

Design Solution

98

Design Solution

Swiping problem - Filters

Current Design

Design Solution

Swipe inducement to make the users swipe for using filters.

Design Solution

99

Design Solution

Swiping problem – Moving between menus

Current Design

Design Solution

Sliding tabs on the sides of center induces user to swipe and move to another menu.

Design Solution

100

Design Solution

Swiping problem – Moving to camera screen from chat menu

Current Design

Design Solution

Top left button ‘Snapchat’ moves the screen left to camera screen but swiping left also moves the screen left to camera screen. Thus, the button should be on the right side.

Sliding tabs on the sides of center induces user to swipe and move to another menu.

Design Solution

101

Design Solution

Swiping problem – Moving to camera screen from chat menu

Current Design

Design Solution

The time snaps are sent is written right on top of the snap or snap’s status.

The time snaps are sent are hidden and only accessible by dragging the screen rigth.

Design Solution

102

Design Solution

Holding problem –Taking a video

Current Design

Design Solution

Instruction on top of the circle menu will help the user hold for taking a video snap.

There i s no indicat ion regarding how to take a video.

Design Solution

103

Design Solution

Holding problem – Viewing received snap

Current Design

Design Solution

Arrows on the sliding tab moves right side, and the tab turns red if there is any received snaps.

To view received snap, user has to hold. However user test results have showed t h a t e v e n t h o u g h instructions appear when use r j u s t taps on the received snap, most users were bothered to read the instructions, and they were m o r e a c c u s t o m e d t o tapping action.

Tapping once will show the snap right away.

Design Solution

104

Design Solution

Unintuitive icons – Snap status

Current Design

Design Solution

Icons in front of users’ ids represent the status of snaps. However because there are many variations using different colors and s h a p e s , i t i s h a r d t o recognize.

Unintuitive icons are changed to ghost icons with less variation so that users can easily recognize.

Video snap Photo snap

Text Message

Recipient viewed

chat

Recipient took a

screenshot

You have sent a snap

You have received one

snap

Design Solution

105

Design Solution

Unintuitive icons – default camera screen

Current Design

Design Solution

Instructions above the icons will help the users recognize what they are.

Icons on the bottom are unintuitive.

Sending a chat from gallery

‘My friends’ menu

Design Solution

106

Design Solution

Unintuitive icons – sending a snap button in chat screen

Current Design

Design Solution

Sending a chat button in chat screen is revised to resemble camera

Design Solution

107

Design Solution

Inconsistent buttons to press – sending text message from chat screen

Current Design

Design Solution

Instead of pressing the ‘전송’ button next to snap button, by adding an enter button only for texting, user would not confuse which button to press.

Design Solution

108

Design Solution

Inconsistent buttons to press – sending text message from chat screen

Current Design

Design Solution

Menu buttons on every camera screens are consistent.

Default camera screen Camera screen from

chat screen

Design Solution

109

Design Solution

Menu structures – Video settings

Current Design

Design Solution

According to the card sorting results, most of users thought that video settings should be in camera page.

Originally only accessible via setting menu

Design Solution

110

Design Solution

Menu structures – Manage # of best friends

Current Design

Design Solution

According to the card sorting results, most of u se r s thou g h t th a t managing number of best friends should be in ‘My friends’ page.

Originally only accessible via setting menu

Design Solution

111

Design Solution

Confirmation problem – Adding friends

Current Design

Design Solution

Since there is no confirmation description, user is confused whether a friend is added or not.

2014 Spring Semester DesignInterface

Contact Info Hyojin Kim

Korea University Information and Industrial Design

[email protected]

snap chat interface analysis report

Documents

snapchat users

snapchat friends

snapchat introduction

interface of snapchat

inteface of snapchat

squircle box

live video

short video