Design

What is design??

GIST Framework

GIST stands for Goals, Ideas, Steps, and Tasks:

  • Goals: Align with the objectives in OKRs.
  • Ideas: All ideas we can test to achieve those goals.
  • Steps: Validation methods to test our ideas, ending with recalculating priorities using ICE scores.
  • Tasks: Team tasks to execute each step.

The system is called GIST after its main building blocks: Goals, Ideas, Step-projects, and Tasks. Each has a different planning horizon and frequency of change, and may use different tools to track, but together they constitute all the core planning any company and team needs to do.

Rethinking MVP

This form of planning is a ton of work — just getting all stakeholders to agree is a massive undertaking, yet ROI is very low. The plans quickly go out of sync with reality 

The planning cycle

Planning with GIST is multi-tiered and iterative:

  • Goals are typically set for an horizon of one or more years — this is where we want to encourage long-term thinking. They are defined at the beginning of the year and evaluated and adjusted every quarter — we don’t want to pursue stale goals.
  • Ideas are constantly collected and prioritized. We never stop looking for new ideas.
  • Step-projects are defined at the beginning of the quarter. The team picks the goals and ideas it wishes to pursue this quarter, and defines step-projects accordingly. The quarterly step-project list (typically stored in a spreadsheet or database tool) is evaluated and reprioritized every 1–2 weeks, in sync with task iterations planing.
  • Tasks are planned in 1–2 week iterations in per the teams’ preferred dev method, for example Scrum sprint planning, and adjusted daily.

Why do I need a design system?

You need a design system when:

  • It is a large-scale product with multiple teams involved.
  • It is an evolving product with ongoing iteration.
  • There are multiple platforms or touch points.

Examples where design systems are best fit include:

  • Enterprise software applications
  • E-commerce platforms
  • Design tools and creative software
  • Large company websites with multiple departments and functionalities

When you don’t need a design system:

  • Designing a landing page
  • Small and simple project with 0% chance of evolving
  • Limited resources and tight deadline

How to Create a Design System?

Before delving into the creation of a design system, it’s worth noting that there are many pre-existing design systems available, both free and paid. Utilizing these can save time and allow you to focus more on brainstorming and user feedback.

Things to keep in mind while designing/choosing a design system:

  • Identify the elements you need in your project.
  • Decide what type of design system you will create (atomic or encapsulated).
  • Make sure to include light/dark versions if needed.
  • Create every state (success, error, warning, disabled).
  • Create all building blocks like navbar, sidebar, widgets, etc.
  • Create proper documentation so that newcomers can easily understand and use it upon joining.

Why you need a design system?

A design system, when made right, is like a blessing. It helps in many ways:

  • Consistency: Maintain consistency across the platform.
  • Efficiency: Easily use components and save time updating the same thing on different screens.
  • Scalability: When the project evolves, it is easier for a designer to add new functions and maintain consistency.
  • Reduce Errors: Having a design system in one place enables dealing with parent components, which is a lifesaver.

Overall, design systems can save time, money, and resources while improving the quality and consistency of your product.

Animation in UX

Research has found that the ideal speed for interface animation is between 200 and 500 ms. These figures are based on the specific qualities of the human brain. Animations shorter than 100 ms are instantaneous and won’t be recognized, while animations longer than 1 second can convey a sense of delay and be boring for the user.

For mobile devices, Material Design Guidelines also suggest limiting the duration of animation to 200–300 ms. For tablets, the duration should be longer by 30% — around 400–450 ms. This is because the screen size is bigger, so objects need to cover a longer path when they change position. For wearables, the duration should be around 150–200 ms, which is 30% shorter than for mobile devices, as the distance to travel on a smaller screen is shorter.

Among objects of the same size, the first one to stop has traveled the shortest distance. Smaller objects move slower than larger objects since they cover greater distances.

The movement of the objects should be clear and sharp so do not use motion blur.

About Colors

1.

Color is one of the most powerful tools for attracting a user’s attention within a UI. Vibrant hues naturally draw the human eye toward interface elements. Color can also influence user perception of weight and size within an interface — warmer hues tend to seem heavier and more prominent.

Warm and cool colors.

2

Users make subconscious judgments about a product within 90 seconds, and up to 90% of that assessment is based on colors alone.

Color psychology. Image by vmgstudio

3

Approximately 8% of men and 0.5% of women are color deficient (~ 1 in 12 men and 1 in 200 women), making sufficient color contrast crucial consideration.

Color blindness. Image by healthdirect.gov.au

4

Warm colors like red and orange are more easily noticed by users in peripheral vision compared to cool tones.

Warm red and orange color palette.

5

Blue is one of the most popular preferred colors across cultures, genders, and age groups for web interfaces and software. On average, users tend to view objects and websites with a blue-based color scheme as more trustworthy and secure.

Color preferences for women and men. Image by vmgstudios
Blue color scheme.

6

Color can impact a user’s ability to quickly comprehend information, with warm colors promoting better understanding of written content.

Warm colors stimulate mental activity. Image by shiftelearning

7

Vibrant accent colors help guide a user’s eye toward desired actions within an interface more effectively than muted colors. Vibrant, saturated colors like red and orange can increase feelings of urgency in users, potentially encouraging faster actions or purchases.

Desaturated, muted colors are less stimulating for users, promoting a calmer viewing experience well-suited for reading or focused work.

Color scheme created from desaturated, muted colors.

8

People process visuals before reading text content, making strategic color choices essential for instant comprehension.

Visual content is brain-friendly. Image by https://blog.squarelovin.com/user-generated-content/the-importance-of-visual-content/

9

The meaning of colors can differ across cultures, so localized color associations must be accounted for in global product design.

International color symbolism. Image by https://rapidnotes.files.wordpress.com/2017/02/international-color-symbolism-chart.png

10

While trends influence color preferences, users respond best to simple and consistent UI color schemes:

  • Too many bright, vivid accent colors competing for attention in a UI can create confusion, stress, and reduced comprehension for users.
  • Consistently used color cues help train users’ memories for functional elements like calls-to-action over repeated application usage.

RAIL Key Actions

RAIL is a model for breaking down a user’s experience into key actions. – RAIL/Response, Animation, Idle, Page Load

Human-computer interaction studies have a long history. In Jakob Nielsen’s work on response time limits, three thresholds are suggested:

  • 100 milliseconds is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
  • 1.0 second is about the limit for the user’s flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.
  • 10 seconds is about the limit for keeping the user’s attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.

Based on this, with today’s improved machine performance, RAIL added one more point:

  • 0 to 16 ms: Users are exceptionally good at tracking motion, and they dislike it when animations aren’t smooth. They perceive animations as smooth so long as 60 new frames are rendered every second. That’s 16 ms per frame, including the time it takes for the browser to paint the new frame to the screen, leaving an app about 10 ms to produce a frame.

Page 1 of 20

Powered by WordPress & Theme by Anders Norén