Instagram Redesign, 12 Pages

1

Instagram Redesign

Ryan Schabel

San Jose State University

10/24/2013

2

Contents

- Instagram 3

- Register & Sign-In 3

- Creating a Profile 4

- Getting Introduced to Instagram 4

- Finding Users to Follow 7

- Home Page 8

- Search Page 9

- Friend Activity Page 10

- Posting A Video 11

3

Instagram

Instagram is a social photo sharing application which is owned by Facebook. The users of

Instagram primarily use the application to take photos and short videos to share with their

followers. These users are also interested in viewing the photos and videos that not only are their

friends and peers sharing, but also organizations and celebrities share, such as snowboardermag,

a snowboarding magazine, or President Obama and Oprah. The main features like are taking

photos and videos, viewing videos and photos, finding friends, finding celebrities and

organizations, commenting and/or liking certain photos, and editing the user profile should be as

easy to use as possible. Because Instagram is a mobile application, it will be primarily used on

smartphones which have limited real estate (available space) due to the small screen sizes of

phones. Therefore, there are many human factors principles and heuristics to be considered when

designing the interface.

The Register & Sign-In Screen

The only difference between the old and new design are the locations for the Register and Sign-

In buttons. They are moved toward the center of the screen at an easier spot for the user to reach.

4

Creating a Profile

The Register screen has been redesigned to allow the user to assume the “Use your Facebook

Info” function is convenient and will complete the profile for them. The mandatory information

to proceed is grouped together and the optional features are also grouped together and labeled as

“Optional.” A final change to this screen is the addition of the “this will help your friends find

you” near the optional information, which will influence more users to fill out the information

completely.

Getting Introduced to Instagram

Instead of having the users shown the Suggested page, which is unlikely to be used, the user will

be taken to the standard interface of Instagram. However, if the original page is used to gain

revenue for Instagram, then this page should be left as it is.

Required

Optional, but helpful

5

Instead of forcing the user to figure out the interface alone, the redesign will have a short

introduction explaining what each page of the interface is for, like so:

6

The icons used have also been changed as well as some of the page names and titles to more

accurately represent the function of each page. This idea follows the Match Between System and

Real World heuristic, which states that the system should speak the users' language, with words,

phrases and concepts familiar to the user.

7

Once the user has finished looking through the introductory screens, they will be redirected back

to the home screen where they can choose to find Facebook friends. However, text has been

added to let the user know they do not have to let Instagram post on their Facebook for them to

use this feature. By providing this text, the interface follows the Consistency and Standards

usability heuristic. This heuristic states that the user should not have to wonder whether or not

different words, situations, or actions mean the same thing. By explaining the situation, the user

will feel they have a better understanding of the system functionality.

Finding Users to Follow

If the user decides to find friends on Facebook to follow on Instagram, they will be presented

with a list of their Facebook friends. They can click on “follow” to follow each person. However,

this list seems to be randomly assorted.

8

In the redesign of this page, the search bar has been added to let users search for the names of

friends. There is also an option to sort users alphabetically.

The Home Page

When the user is back at the Home page, the user is provided with the most recent posts made by

the users they are following. The user can like photos by double taping the photo or clicking the

“Like” button, comment on a photo using the comment button, or press the “…” button which

lets the user share or report an image.

9

A common complaint made by Instagram users is the inability to zoom in on photos. Usually,

new users double tap the photo in attempt to view a larger version. Instead, the users are “liking”

the photo unintentionally. In the redesign, users can now view larger versions of photos by

double tapping the photo. Because there is already a button dedicated to “liking” a photo, there is

no cost to this additional function. Another aspect of the redesign is the distinction of buttons

between sharing and reporting a photo. There is available real estate on the screen next to the

“comment” button which would allow the user to share, rather than opening a menu that is close

to having an adverse, unintended effect. Because reporting is a serious and important function, it

is an independent function shown in red with an exclamation mark.

The Search Page

The “Explore” page has been redesigned as the “Search” page.

In this new Search page, the popularly followed users are still shown as they were in the old

design. However, these popular users are now labeled with a headline and are spaced further

from the search bar. This gives users the affordance that this page is not only to find popular

users to follow, but also to find friends, users, and posts based on hashtags. The Search page icon

has also been changed to a magnifying glass which more accurately represents a search

compared to a compass which represents navigation and location.

10

Friend Activity Page

The “Following/News” page has been retitled and edited to be the “Friend Activity” page for the

redesign. Previously, this page was divided into two pages titled “Following” and “News.”

While “Following” will remain to be one of the page titles, “News” has been changed to

“Notifications.”

11

In the old design, “News” displayed both friend and user activity with notifications directly

related to the individual user. Instead of showing all Facebook friend and user activity together

with personal notifications, these two activity types (friend/user activity and personal

notifications) are now separated into two sections. Also, the “New” and “Older Posts” sections

have been renamed to “Personal Notes” and “User Feed,” respectively. “Personal Notes” will

only be directly related to the user’s posts and account, such as new comments or likes on the

user’s posts and new followers. “User Feed” will now only show Facebook friends who have

recently joined Instagram and people who have started following the user. This redesign

incorporates better grouping principles by organizing similar information closer together in

proximity.

Posting a Video

To record a video in the old Instagram interface, the user chooses the camera at the bottom of the

interface and is brought to the camera screen. Taking a new video is straightforward. Once a

video is chosen by the user, the video must be trimmed and cropped to certain time constraints.

The user can control the start frame with the video scroller at the bottom of the screen while the

end and length of the video is controlled by the top slider. These controls are not intuitive and

require the user to learn the interface with low level of affordances.

12

In the new design of the Trim & Crop interface, there are two independent sliders to select the

beginning of the video and the end of the video independently. Because there is a time constraint

on the video, the end slider will only move as far from the start slider as the time allowed. The

top blue slider will move the start and end sliders together, keeping the video length constant.

This design is more simplistic yet also provides high affordance to allow the user to more

quickly understand all of the controls of the design. By showing two start and end bars which are

similar in appearance along with a top slider, the design provides higher affordances to the user

as they will recognize exactly what part of the video they are cropping.

Controls End Frame

Controls Start Frame

Chooses Section of Video