Instagram Redesign, 12 Pages
-
Upload
ryan-a-schabel -
Category
Documents
-
view
237 -
download
0
description
Transcript of 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 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