Published on | Prototyping: From UX to Front End — Medium Lisa Yang

My relationship with Instagram began in 2012. At that time I was a young university student who scraped together my savings to buy a 2nd hand iPhone 3G just so I could keep up with my friends and download this hot new app called “Instagram”. I can just imagine the increase of iphone sales when Instagram was only available on ios ( not that they really needed it to boost sales). As soon as I discovered the app, my entire world changed after posting my first ever photo of my yoga map.

Alright that’s a complete exaggeration, but creatively it did provide an outlet that allowed me to document my life like a visual journal. I have to admit I was an editing/filter junky, but that’s what early adopters of Instagram were all about!

Instagram also introduced me to the world of Instagram “community”, introduced me to a local photographer (aka first guy I’ve ever dated) and it forced me to discover and explore new places and see things with more of an artistic lens. I’ve been through a lot with this app! As a veteran Instagram user, the app has always been clear and easy to use because the designer’s behind the app have embraced the 5 broad categories for usability heuristics: Learnability, Efficiency, Memorability, Errors, and Satisfaction.

Learnability (Visibility & Feedback, Mapping, Affordances, Constraints Consistency, Help)

Visibility & Feedback: As an app, it’s pretty straightforward and doesn’t have much of a learning curve, though Instagram does provide short prompts such as the example below to educate users what the icon is for.

When you sign up for Instagram, the on-boarding prompts are short and effective. The app allows users to play with the interface by themselves and teaches them as they go. Similar to a well designed video game.

This new features is introduced in a comment form which is quite smart because that way commenters are learning what it would look like and visibility wise, it

Mapping

The buttons on the app are mapped out so that the natural way of holding the phone for most people allows for the user to access the most used features: home feed and user profile. On an iPhone, the home button is placed in the middle of the phone and it’s the natural placement of the thumb when holding the phone, thus by placing the add photo/s button above the home screen makes the most sense and it’s what users generally want to do most when they’re logged into Instagram.

Affordances:

Instagram uses flat design in its interface so it doesn’t have the usual drop shadows or inner shadows to indicate that you can press on the links and buttons but it does use the differentiation with colors to educate the users. On some layouts where you have to enter in text/numbers they include the flashing curser to teach users that this is an active field and it’s waiting for you to fill out the field.

Constraints:

When uploading or viewing a story, Instagram provides timelines to indicate the duration of photo upload and where the user is in terms of story viewing.

Consistency:

Instagram is showcased on a a grid. The gutter between photos are not too wide. Though a few years ago, photos were restricted to 612px by 612px but then switched to 640px by 640px and then in July 2015 switched to 1080px by 1080p.

Help and Documentation:

Instagram is very intuitive so there’s no need for major documentation. Once you log in there are prompts that pop up depending on where you click to help you understand what it’s used for. There is of course, a help link when you need it as well.

Short and succinct. When you first create an account, Instagram provides short descriptions for how this button functions. For people who wants more information, they provide a “Learn More” option.

Efficiency

Once you’ve start playing around with the functions of Instagram, it’s really easy to understand and the user doesn’t have to spend additional time learning its functions. It’s quick and easy to post pics, scroll through feed, review own profile and discover users, especially with the intuitive and familiar icons they provide.

Memorability

Instagram keeps you signed up until you log out so you automatically access your account when you open your app.

Errors

Instagram makes it apparent when something has failed to upload and the reason why it failed. The example below shows that the photo did not upload because there was no Internet connection.

Satisfaction:

Instagram is my favorite app by far. Instagram’s UI and UX are well thought out and the designers behind the app have really studied the science, art and psychology of its users, thus creating very satisfying user experiences. Rossul.com breaks down the UI Design in 4 points.

Direct and simple — Does not overload users with information. Less is more, but do the less well.

Satisfying — A UX needs to be visually appealing but balanced, pleasantly interactive and emotionally gratifying.

“Glanceable” or “capturable “at a glance — A good UI provides design elements that do not require too much cognitive effort.

User-focused — Instagram’s new UI makes users and their intentions, not the navigational elements, the focal point of the UI.

Do user’s like it? According to the App Store, Instagram has an average of 4.5/5 stars across all versions! While it could always use improvement, and there are crashes and bugs, the users love it.

Source:

Reviewing Instagram’s New User Interface

Instagram: A UX and Usability Case Study was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Instagram: A UX and Usability Case Study

Cool stuff, every week

More Articles