Information Design — Wireframes: A Coursera Learning Experience

View the original post

Information Design — Wireframes: A Coursera Learning Experience

(Re)Designing the Youtube Tablet App Landing Page

WireFrame — The Building Block of User Interfaces

Information Design : Coursera — UCSD

I have always loved to prepare amazing presentations to be able to explain my work. Structuring and organizing data visually and using images/diagrams to explain myself have been my inherent interests. Hence I have developed a keen interest in user interface design. To further my knowledge of the field, I took up the Information Design course offered by the University of California San Diego on Coursera. I loved it and was able to earn a Certificate after completing all the requirements of the course. I learnt how to effectively organize and present information on a user facing device starting out with a clean slate. “How?” — you ask — the answer is through wireframes.

Wireframes — What are they ?

As creators we have quite a lot on our minds all the time to say and present, learning information design as a concept puts us in a better position to present our thoughts visually in a structured manner. Now one may ask why can we not have it all at one place — our creativity and ideas all artistically put up for everyone to admire. Well there is art and there is information. Both are separate. Art is for visual pleasure, whereas information design though it does encompass visual appeal but at the same time there is an element of information that needs to be clearly conveyed to the end user who consumes it.

This is how Wikipedia defines Wireframes

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.

My Naive take on it

Wireframing essentially is breaking down the visual interface design process into a two step journey. Imagine learning to paint as a kid. Think about the old school days and when you were starting to learn drawing and painting in the Art classes. My Art teacher had a simple 2 step process to painting.

  1. Pencil Drawings — First layout the canvas. My art teacher emphasized on the importance of clear drawings with the pencil first before beginning to paint. I just could not paint directly without having the shapes and boundaries clearly defined. Wireframes are the pencil drawings so to say before we start to paint.
  2. Now Start to Paint — Once you have hand drawn the to be painting, it is time to well paint it. Fill in the colors and the painting comes alive in no time.

Wireframes — Importance

Having a wireframe for presenting any piece of visual information be it a presenation on Microsoft Power Point or an app design for hand held screens, wireframes help us to articulate the information before it is presented. I feel they are important for the following reasons —

Visual Articulation — Structuring helps one focus on key elements of the visual information that needs to be passed on to the user. Helps to reduce the visual noise.

Think of wireframes as building blocks — a blue print of the final design.

Visual Hierarchy — It allows the designer to define a visual hierarchy of the information being displayed. Why is visual hierarchy important you ask, well think about it as the designers way of conveying to the user that I am mindful of your time and energy, so I am going to layout important things in a manner that you can foucs on your tasks you want to accomplish instead of you having to go through the pain of locating and finding out what you need.

Having a Visual Hierarchy is the designers way of saying to the user — “Dear Sir/Ma’am, we understand your needs and are mindful that your time and energy is important, so we have the important things upfront for you”.

Emphasis is on the User Task — Wireframes are built upon the task to be accomplished and they organize the visual elements in a way that help users accomplish the task without putting in much effort. It is easier to make changes to the wireframes incase the user needs get redefined amidst the development process, instead of changing the final design that has all the visual elements added.

Wireframes are a reminder for any user interface designer that carefully thinking on the task to be accomplished is the first and most important step before starting out with the Visual Interface design process.

Getting my hands dirty

Below is a wireframe design of the YouTube app on a tablet screen — 1024px h × 768px w (or 8"h × 6"w), that I had prepared(well reverse engineered) for learning and understanding the process of laying out the user task and creating the wireframes to accomplish those tasks.

Defining the Visual Hierarchy — Portrait Mode

How do we divide the screen space to display the information adequately. For a tablet screen the division is as follows —

  1. Have top and bottom margins. These are used for displaying navigation buttons.
  2. Divide the remaining screen horizontally into 2 halves. First half displays the most important information.
  3. Divide the 2nd half further vertically into 2 halves displaying lesser important yet logically different set of information.

Task, Wireframe and Mockup

Task — We need a landing page for the user. YouTube is a video search engine. Think about the different ways one can search videos

Ways to Search

  1. Type what you are looking for into a search box.
  2. Maybe the user does not to search anything specific but wants to have a look at certain category of videos.
  3. Maybe there are trending videos that are popular right now— the ones which the masses are watching perhaps
  4. Maybe he was watching a certain video, was interrupted and has now returned to continue watching them.
  5. Maybe the user needs video recommendations — which could be based on his previous views, the channels he has subscribed to, the categories he has browsed previously..

Analysis of the User needs before Wireframing

Does one really want to search or would rather prefer to watch what is recommended for them? Answering this particular question is an important step before wireframing and how we develop the visual hierarchy. Looking at YouTube’s success I think that displaying the user what they may like leads to a better user engagement and the infinite scroll feed is a great way of holding the user onto the app. It is a simple technique — do not let the user think too much and let the app do it for them. Think about what a boring and dull experience it would be if YouTube does not display any recommendations and every time you go onto YouTube you have to type and search the video you want to view.

YouTube goes one step ahead to engage the user even further by providing an Auto Preview of the video currently occupying the major position in the visual hierarchy in the app display. This way the user gets a better idea whether to watch the video fully or scroll further to the next one.

Few Improvisations from my end

  1. I have improvised the auto preview a little by adding the mute/unmute button to play the video with sound while previewing instead of tapping on the video and opening it onto a new screen.
  2. I have decided to keep the infinite scroll horizontal on the tablet as the tablet is generally operated with 2 hands — one hand holding the tablet and the other tapping the screen. Horizontal scrolling on the major portion (video preview portion) seems more natural to me as a user. Same goes for the “Trending” videos scroll. However the “Continue Watching” scroll is vertical as the user holding the tablet with the left hand would be able to scroll vertically with the left hand thumb.


Wireframe (re)design for the Task

Once our wireframes are ready it is time to color our canvas with the design elements. We call it creating the Mock ups.

Mock Up for the Task

Information Design Course on Coursera was an awesome learning experience for me. I thoroughly enjoyed the assignments, they felt quite challenging and energy draining at first, but as I persevered, I got a hang of it and was extremely proud of my learnings and what I had created. More importantly the course made me a better thinker.

Information Design — Wireframes: A Coursera Learning Experience was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.