Basic UI/UX

Top tasks

What is the purpose of a visitor coming to your website? And how can we make the journey of that visitor a pleasant journey?


  • The interface should feel native to the device the person is using
  • The app should be lightweight and require as little storage as possible
  • The interface should be simple
  • User actions and animations should be quick to respond
  • Features should provide obvious utility so they require little introduction

If the feature needs explanation, it’s not ready.

3 C’s: Containers, Content & Components

  • Rule for Containers uses the concept of Square Inset (uses 16px)
  • Rule for Content uses the concept of Stack (Header stack uses 2px and leaf-node stack uses 0,4,8,16px depending on content type)
  • Rule for Components use the concept of Inline (uses 8px for most cases, 4px for association relationships)

Dan Saffer’s “Microinteractions”

Triggers: the user-initiated or system-initiated action that starts the microinteraction (Example: a submit button, a light switch)

Rules: the capabilities and constraints in the microinteraction; what can and cannot be done in a microinteraction (Example: a date picker for an airline allows you to select departure and returns dates but neither date can be in the past)

Feedback: the visual cues that tell the user what is happening (Example: a red warning icon appears when the user’s password is incorrect, the flash on the screen when a user takes a screenshot, the dwindling character count as you type out your tweet)

Start with objectives

Design is not just how it looks, but how it works

  • Your business objectives. It’s the action you want visitors to take on the site.
  • User objectives, the desires or needs that they want to satisfy.
The first step in a flow is mapping out how they get onto your site.
Your goal is to map users paths.
Designing user flows
  • Organic search. A user comes via Google, after searching for a particular keyword. Often lands on a deep link.
  • Paid advertising. Visitors that come via PPC advertising (AdWords etc), banner ads or other kind of promotions. Arrives on your landing page.
  • Social media. A user coming from a friend’s post on Facebook or Twitter, or via social news site like Reddit.
  • Email. A user coming from an email newsletter or a link they saw in an email sent to them.
  • Press or news item. Visitors who come after a mention in the news or a blog post.
  • Direct link. A regular visitor, has been on your site many times and knows the URL by heart.
The steps in the flow depend on your users and the product
  • What needs or desires do your visitors have? Which problem do they want to solve?
  • Why do they need it?
  • What qualities (about your product or service) are most important to them?
  • What are all the questions they have about the product?
  • What are their doubts or hesitations?
  • What information do they need to take action?
  • What’s their emotional hotspot to propel them towards taking action?
Present sufficient information
  • In each step present a clear, benefit-oriented value proposition.
  • Explain how your offer is useful and how it all works. Invite to read more detailed information.
  • Back it up by easy-to-digest proof points (references, testimonials, studies etc).
  • Minimize friction. Ask for the minimum amount of information, reduce the number of fields, extra clicks and page-loading time. Use trust elements.
  • Create clear and attractive calls to action that guide them to the next step

The mistake a lot of websites make is asking for the sale (signup etc) too soon. There’s little we  people do without the adequate amount of information.

10 Usability Heuristics for User Interface Design

  • Visibility of system status
  • Match between system and the real world
  • User control and freedom
  • Consistency and standards
  • Error prevention
  • Recognition rather than recall
  • Flexibility and efficiency of use
  • Aesthetic and minimalist design
  • Help users recognize, diagnose, and recover from errors
  • Help and documentation

Recognition Recall

  • items that visited recently
  • history
  • favorites, wish lists, shopping lists

Gestural interfaces move us back to the era of recall, because they require users to remember the gestures that they can make in a given context.

Instead of showing general tutorials, use tips that are tailored to the page that the user is visiting

How easily information can be retrieved from memory depends on how often we’ve encountered that information, how recently we’ve used, and how much it is related to the current context. Richer contexts (like those present when we use recognition rather than recall) make memory retrieval easier. Interfaces that promote recognition give users extra help in remembering information, be it about tasks and items that they had seen before or about interface functionality.

Design thinking re-envisioned for the modern enterprise

Leave a Reply