Speak Designer :) Understanding the terminology :)

Design language can sometimes be hard to synthesize, here is list of vocabulary and some design concepts.

Ideation – get as many ideas as possible, emphasis is on quantity. Take the idea, sketch it (express it) and explore the idea. Idea can take many forms from table to wireframes (rough sketch) to more formalized document.
Artifacts – Design documents are called Artifacts. These are bi-products of the design.

DEISGN is Users, Context, Tools, Tasks and Goals.

Interaction Design – This focuses on tools and the task. Use the tools to achieve the tasks.
1. User Needs Statement – The Who, the What and the Why. Who may be the name or the role, what are they doing it and what are they valuing it. This can be used in feature prioritization, design principles etc.
2. Information Architecture – Structuring information, what the user do in each space, how the user moves between the spaces. Designs the structure of the experience.
3. Storyboard – Presenting a sequence of annotated images to go through the entire experience, i.e. move from opening the app to performing the task, generating the output and all the way up to closing the application.
4. Affordance – Object must be able to suggest how it should be used.  There should be something about the object that tells how it should be used.

Visual Design – Communicates the nature of the object.

1. Grids – Foundational principles of design that allow for greater speed and confidence. Divides a space into smaller component.
2. Margins – The area between the content and the edges of the screen.
3. Gutter – Denotes the space between the column.
The Grid, Margin and Gutter together convey the layout of the page.
4. Aspect Ratio – 2: 1 implies the width is twice as long as the height.
5. White space – The unmarked area of the pages.
6. Hierarchy – A classification of things per their importance (priority level). Margin may be bigger than gutter due to the hierarchy.
7. Zhoosh – Spruce something up, improve something.

Sans in French means without, Serif are the strokes the end of the work. Slab is a type of the serif – it has blunt rectangular end. Times New Roman is suitable for screens that are coarser in resolution. Also useful when lot of words are to put in together.

1.Baseline – The line on which all lowercase letters sit.
2.x height – Distance between the baseline and middle of the letter.
3.Leading – Space from baseline to baseline.
4. Kerning – Space between the letters.
5. lorem ispum – placeholder for the text (don’t read me just look at me).

Motion design is where, design becomes code based.
Responsive Interaction – How does an affordance reach when interacted with. Communicate a very short story (may be even 1 second).
Motion should always feel natural. Things should accelerate, decelerate and change direction in a natural way.
Janky – Anything that’s unnatural, unreliable.

Let us use all the tools to ensure our designs are not Janky.

Thanks,
– R

Sources:
1. https://www.youtube.com/watch?v=80hrknwD74Q [Google IO – 2016]

Product Requirements Definition

The PRD is used to define’s the product’s purpose, features, functionality and behavior. The specifics within the PRD can vary by the organization. Some companies can call it Product Design Document and more emphasis may be on the product design element. However, evrey product is accompanied by a PRD.

Use Case: The product team will use the Product Requirements to build and test the product.

Analyze the customers and Market – Understand your customers, study your competitors, team’s capabilities and the available technologies. 

Define the Product’s Purpose – Every product needs to solve a customer need/ add delight to the customer experience (which also solves the need for a good customer experience). Thus, a very clear value proposition for the product needs to be defined. Also, the objectives of the product are the user needs the product aims to solve.

  • The problems you want to solve, not the solution
  • Describe the scenarios
  • Who is the target user?

Objectives could be:

  • Ease of Use
  • Increase in session time by ~10% 

Objectives need to be measured to ensure that once the product is released, the objectives are met. The details of measurement of objective needs to be explained. As an example, the ease of use can be measured by the time spent by user on each task, % of successful completion of a certain task, the user engagement etc.

Thus the product’s purpose, defines the user needs solved by the product and define the success state for the product.

Define the User profiles, goals, tasks & principles – 

User Profiles: Once the customer needs are defined, the user profiles i.e. personas needs to be defined. Defining the persona and the context of the product in view of the specific persona, helps tailor the product. User persona could be user journey or a detailed description that helps set the customer context. The target user base needs to be precise and well-defined.

User goals: Each user persona may use the product to meet certain goals. Thus, the goals as it related to each persona needs to be clearly defined.

Tasks: The tasks that can help people accomplish the goals needs to be defined.

Each team can identify a list of product principle that will help guide the team throughout the product life-cycle. The principles should be specific to the project and the domain on hand.

Product Features –

The requirements, need to be clear, unambiguious and state the need. Each feature should be defined at the level of the interaction deisgn and use cases. The user exeperince and what each feature is should be described while leving the implementation/ other flexibility to the engineering team.

Requirements Traceability: Each requirement needs to be traced to objective(s). This helps deduce the impact if a certain requirement is taken off and ensure that all the requirements are adding value towards the overall objectives.

Release Criteria –

The release criteria mentions important non-functional requirements such as Performance, scalability etc. which are very critical specifically in software products.

  • Performance
  • Scalability
  • Reliability
  • Usability
  • Supportability
  • Localizability

Scehdule – 

The schedule should describe the timeframe for the project, the context behind the timeframe and the motivation for the timeframe. This can hehlp motivate the team.

Feature Prioritization –

The features listed in the product can be categorized as “must-have”, “high-want” and “nice-to-have”. Within each category, the features can be ranked 1 through n. This will help implement the important features and ensure that the high priority features are completed and tested before the product hits the market. Further, if additional requirements are to be discovered and added during the design/ implementation phase, this ranking will help cut the existing features to accomodate new ones.

The PRD can be tested for completeness and refined continiously.

Source:

  1. http://www.svpg.com/assets/Files/goodprd.pdf
  2. https://www.uxpin.com/studio/blog/write-good-product-requirements-document/

 

Search all the way

Screen Shot 2016-06-19 at 12.01.03 PM

Search has been an integral part of most of the computer operations. Even companies whose core feature is not search either build or adopt state of the art search engine to provide the best user experience. In this blog post, I will try to reason out the look, feel and functionality of a search engine and reason why some are more successful than others.

Given the advancement in technology and the revolution in browsers, the address bar can be used as a great search engine. Let us assume a more conventional path where a user goes on to “www.examplesearch.com”

Once a user goes to “www.examplesearch.com”, the intent of the user is clear : the user wants to search for something. Placing a prominent search bar in the page is very critical since it serves the basic intent of the user visiting the page. So now that we need a prominent search bar, where do we place the search bar?

  1. Search bar at top of the page: Placing a search bar at top of the page laves a lot of room for recommendations drop down but might cause the following 2 issues:

Screen Shot 2016-06-19 at 12.04.47 PM

a. The top of the page gets very cluttered and leaves a lot of real estate in the page                           free. If the name of the company and the branding is  at the center then the focus                       shifts from the intent of the user (search) to the company/ branding.

b. Another potential issue is that the user can mistype in the address bar of the  web                       browser instead of the search bar. If address bar does not have search capabilities                       or if the browser is set to another default search engine, the user experience is  is                         lost.

2. Search bar at bottom of the page: Placing a search bar at bottom of the page takes the                place away for the drop down recommendation. Further the footer generally contains                links to the subsequent pages and might make the appearance very cluttered.

Screen Shot 2016-06-19 at 12.17.08 PM

3. Search bar at middle of the page: Placing a search bar at the middle of the page provides          the right mix of branding and capturing the main intent of the user. So perhaps placing            the search bar in the middle of the page to start with is a good idea.

Screen Shot 2016-06-19 at 12.27.09 PM

Now, exploring the top right corner of the page, the sign-in/sign-out option has conventionally been on the top-right corner and might be the best fit place for the account options given the traditional user preferences. Search is integrated with many other products and if search is the flagship default page of the company, providing links to other products on the search page can help create product awareness and also provide an integrated user experience.

Screen Shot 2016-06-19 at 2.56.47 PM

The four squares at the top right corner when clicked, expands to provide links to a list of other products that belong to the company. This may not be as intuitive as it Pseudo violates Don Norman’s design principles. The consistency factor is missing out since all the other aspects are visible and spelt out while the rectangle boxes constitute a shape and do not provide a verbal description.

The cicl at the top right corner can be termed as “account button” and provides functionality to sign in, sign out and modify account setting which needs to be largely consistent across the products delivered by the same company. If the user has a profile picture, then the profile picture can be fit inside the circle to visually illustrate that some details about the user will be obtained upon clicking on it.

Now, with digitalization on the increase, image search can be a deal breaker. While image search is already prevalent, it may be a good idea to provide link to image search for the user. in the landing page itself. If the user does not obtain the necessary result through rudimentary web search and feels that image search is a better option then an option to image search would be pivotal.

Screen Shot 2016-06-19 at 3.26.52 PM Screen Shot 2016-06-19 at 3.29.41 PM

There can be a link to image search as in the figure shown on the left or it can be placed in the top right corner as shown on the right.The “image search” phrase below the search bar can be replaced by a aesthetic icon or creative text informing the user to go to image search if necessary. On the other hand, image search can also be placed on the right hand top corner proving a link to to the image search page. Perhaps A/B testing could be done to determine which of these is a better option. While the option on the left makes it easily accessible it might prompt the user to use image search when it is not necessary. The user may not notice the option on the top right corner and may go on with traditional search even if image search is a better option if the image search link is placed as shown in the figure on the right.

 

 

 

 

 

Designing a Video Streaming site – Home Page

In this blog post, I will try to reason out why a website has been designed a particular way and if can be optimized further. this post, refers to a desktop version of a video streaming website.

Some video streaming website has been a following way. It depends on where the user lands on your page from.

So 1. Track the source: Is the user coming directly to your website “www.examplevideoandstreaming.com”.  Now let us suppose that the home page looks like this. The rectangle with cross inside denotes a video.

Featured image

Now thinking about the design, there can be a number of questions that arise:

Advertisements:

  1. Should we have advertisement on the page – is our aim to get the user latched on to videos and then slowly kick in advertisements or should we have ads in Page 1?  It is usually one of the 2 scenarios:
    1. As a user, when I go to the website directly, I am sure I want to watch videos but I am not sure what video I want to watch.
    2. As a user, when I go to the website directly, I am sure what video I want to watch. I am going to go to the website and search for the video.

Putting up advertisements on the page, takes up some land scape. Is it worth putting advertisements on the home page considering that we want to provide the user with what the user wants right now. the additional aim is to keep the user in the website for as long as possible.

  1. Let us consider scenario (a) – Suppose the user does not know which video to watch, it is better to provide the user with more options.  If we put up an advertisement on the top half of the page, we may loose out on space where we could provide potential recommendation to the user. Hence putting Advertisements in the top half may not be a good option.
  1. Let us consider scenario (b) – Suppose we put the advertisement in the bottom half, what is the probability that the user is going to scroll down and go to the bottom half.
  2. Even if the user reaches the bottom half, the user would have seen a lot of content and images by then. What is the probability that the user is going to see the advertisement distinctly? The user aim is to decide on a video now.

Considering the above 2 common scenarios, it may not be a good option to have advertisements on home page.

Recommendations:

The next aspect to inspect is: How do we recommend videos? There a few options here. There are 2 types of user – new user (no data on preference) or existing user (data on preference available).

Categories (vs) No-Categories

  1. Do we just put in all the videos without any categorization – This may confuse the user. Combining the videos into categories will make it easier for the user to think and select the video. Data collection will also be easier for us based on categorization.
  2. We have decided that we are going to categorize our videos. Now there are many variables, we decide in the next section.

      New user (no data on preference)

How many categories should we have? How many videos per category? How many times should the user scroll before reaching the end of page?

  1. Number of categories: There are 3 types of user – active clickers, passive clickers and no clicks. The names are self explanatory.
    1. Active clickers – need to present a large collection of videos so that they have multiple options to click at. For these users, we need to present as many videos as possible on the home screen. Considering a standard screen size, we can push in 30-40 videos. This may make it look a little cluttered, let us ball park and fix at 35.
    2. Passive Clickers – need to present some information about the video. We may need to provide details such as number of times it has been viewed, when the video was updated and information such as genre if it is music. So while we provide this information we may have space for only 25 videos at one screen fit.
    3. No clicks – these are the negative personas. We need to provide them a optimize mix of “number of videos and information about video”.  Difficult to ball park a number for these users.

So considering the above scenario, about 30 videos with 2 lines of information about each video may be an ideal number.

On the number of categories, it is important to give enough categories for users to browse and select a video but also make is small enough to make it look uncluttered. It will be beneficial to provide around 5 video per category and a (>) arrow key after the 5 video if users want to browse more videos in this category. 5 videos per category can be accommodated in a single line and hence 5 seems a good number.

So if there are 30 videos and 5 videos per category, we will have 6 categories in one screen frame.

The categories we want to present can be based on a number of factors such as

  1. Trending Topics
  2. Country specific recommendations
  3. Popular categories (Music, sports, cartoon, movies)
  4. Recommendation based on time etc.

     Current user (data preference available)

The preference of the user is available, we can customize the number of recommended videos, the categories based on the historical data available about the user.

Generally it is considered that users should not click more than twice to achieve their action. Hence, it would be ideal to provide one more screen if the user scrolls down. To stretch it further, we can provide a 3 screen.

This is my take on the home screen  of a video streaming page. Please send me your feedback!

Thanks

–R