L2 Digital Accelerator: Principles of Design & Usability

Design for the Web (originating from Design for Print)

Start here:

Arrow

  • Specify context of use: Identify who the primary users of the website, why they will use the website, what are their requirements and under what environment they will use it.
  • Specify Requirements: Once the context is specified, it is the time to identify the granular requirements of the website. This is an important process which can further facilitate the designers to create storyboards, and set important goals to make the website successful.
  • Create Design solutions and development: Based on the website goals and requirements, start an iterative process of design and development.
  • Evaluate Product: Designers do usability testing to get users’ feedback on the website. Evaluation is a crucial step in website development which gives critical feedback.

 

Effective web design is judged by the users of the website and not the website owners.

There are many factors that affect the usability of a website, and it is not just about form (how good it looks), but also function (how easy is it to use).

Principles of effective web design_Steve Jobs

Websites that are not well designed tend to perform poorly and have sub-optimal Google Analytics metrics (e.g. high bounce rates, low time on site, low pages per visit and low conversions). So what makes good web design? Below we explore the top 10 web design principles that will make your website aesthetically pleasing, easy to use, engaging, and effective.

ArrowFurther reading on Design Principles: Design

1. Purpose

Good web design always caters to the needs of the user. Are your web visitors looking for information, entertainment, some type of interaction, or to transact with your business? Each page of your website needs to have a clear purpose, and to fulfill a specific need for your website users in the most effective way possible.

2. Communication

People on the web tend to want information quickly, so it is important to communicate clearly, and make your information easy to read and digest. Some effective tactics to include in your web design include: organising information using headlines and sub headlines, using bullet points instead of long windy sentences, and cutting the waffle.

3. Typefaces

In general, Sans Serif fonts such as Arial and Verdana are easier to read online (Sans Serif fonts are contemporary looking fonts without decorative finishes). The ideal font size for reading easily online is 16px and stick to a maximum of 3 typefaces in a maximum of 3 point sizes to keep your design streamlined.
Principles of effective web design_Serif vs Sans Serif Typography

Arrow Further reading: Typography

4. Colours

A well thought out colour palette can go a long way to enhance the user experience. Complementary colours create balance and harmony. Using contrasting colours for the text and background will make reading easier on the eye. Vibrant colours create emotion and should be used sparingly (e.g. for buttons and call to actions). Last but not least, white space/ negative space is very effective at giving your website a modern and uncluttered look.

ArrowFurther reading: Colour

5. Images

A picture can speak a thousand words, and choosing the right images for your website can help with brand positioning and connecting with your target audience. If you don’t have high quality professional photos on hand, consider purchasing stock photos to lift the look of your website. Also consider using infographics, videos and graphics as these can be much more effective at communicating than even the most well written piece of text.

6. Navigation

Navigation is about how easy it is for people to take action and move around your website. Some tactics for effective navigation include a logical page hierarchy, using bread crumbs, designing clickable buttons, and following the ‘three click rule’ which means users will be able to find the information they are looking for within three clicks.

7. Grid based layouts

Placing content randomly on your web page can end up with a haphazard appearance that is messy. Grid based layouts arrange content into sections, columns and boxes that line up and feel balanced, which leads to a better looking website design.

Arrow Further reading: Grids

8. “F” Pattern design

Eye tracking studies have identified that people scan computer screens in an “F” pattern. Most of what people see is in the top and left of the screen and the right side of the screen is rarely seen. Rather than trying to force the viewer’s visual flow, effectively designed websites will work with a reader’s natural behaviour and display information in order of importance (left to right, and top to bottom).

Principles of effective web design_F Layout

9. Load time

Everybody hates a website that takes ages to load.  Tips to make page load times more effective include optimising image sizes (size and scale), combining code into a central CSS or JavaScript file (this reduces HTTP requests) and minify HTML, CSS, JavaScript (compressed to speed up their load time).

10: Mobile friendly

It is now commonplace to access websites from multiple devices with multiple screen sizes, so it is important to consider if your website is mobile friendly. If your website is not mobile friendly, you can either rebuild it in a responsive layout (this means your website will adjust to different screen widths) or you can build a dedicated mobile site (a separate website optimised specifically for mobile users).

Mobile Friendly Web Design

It is easy to create a beautiful and functional website, simply by keeping these design elements in mind. Have you got a website design that needs reviewing or optimising? Or perhaps, you are planning a website and you are looking to get the design right from the ground up. Either way, these principles of effective web design can help your website be more engaging, useful, and memorable for visitors.

 

Arrow Source: https://shortiedesigns.com/blog/10-top-principles-effective-web-design/

[26/02/19]

 

Gestalt Design Laws

Gestalt is a form of psychology based on cognitive behaviors.

The word “gestalt” means “unified whole.” It captures how we perceive, process, and piece together fragmented parts.

pasted image 0 1435

When applied to design and visual perception, gestalt refers to how the mind copes with a large amount of visual input from our everyday lives.

We tend to discern relationships among design elements and consolidate objects into groups to simplify input.

When leveraged properly, these relationships and groupings allow us to create a better user experience and communicate a message more effectively.

Here are the design principles derived from the Gestalt theory:

Proximity

When objects are grouped together close in space, they tend to get perceived as one object.

The distance between objects on a page determines whether they’re perceived as a group.

Improve usability by putting elements of the same category close together, such as navigation or footer links, to show that they’re all parts of the same function.

Similarity

Shared visual characteristics create relationships. If two items look alike, they’re perceived to be in the same group.

In website design, you can use visual treatments to communicate the function or category of a piece of content.

For example, when all testimonials share the same design treatment, visitors will perceive them to belong to the same category even when they’re scattered across the site.

pasted image 0 1481

Continuity

Once the eye starts following something, it’ll continue traveling in that direction until it comes across another object.

Many conversion-focused websites leverage this cognitive habit by using photographs of models whose gaze is directed at the content or call-to-action on a page:

pasted image 0 1471

Closure

The brain seeks completeness, so when we see shapes or images that aren’t complete, it’ll fill in the blanks.

The law of closure can be used to make a visual design more interesting. It works best on objects that are common and recognizable by the audience.

pasted image 0 1480

Symmetry

The brain seeks out symmetrical arrangements.

When we see two unconnected but symmetrical elements, our mind will put them together to form a coherent shape.

pasted image 0 1438

A symmetrical arrangement of elements on a page helps create a visual unity that’s pleasing to the eye.

Common fate

We group together objects that show the same directionality.

For example, when you have a group of people gesturing in the same direction, they’re perceived as a group.

Just like the gaze of a model used in the law of continuity, you can leverage this cognitive behavior to draw attention to content, logos, or calls to action.

pasted image 0 1449

Arrow Source: https://neilpatel.com/blog/web-design-conversions/

[25/02/19]

Usability testing from the God Father of User Testing: Nielsen Norman Group

  • How to Respond to Skepticism of Testing Small Groups of Users

    “That’s just one person” and “Our real users aren’t like that” are common objections to findings from qualitative usability testing. Address these concerns proactively to ensure your research is effective.

  • Formative vs. Summative Usability Evaluation

    Usability testing and other UX evaluation methods can be divided into two major categories: formative evaluation and summative evaluation. Both have their place, but at different stages in the design lifecycle, and they have different characteristics, for example in the number of test participants needed for a good study.

  • Usability Testing with 5 Users: Information Foraging (video 3 of 3)

    Usability testing is similar to how wild animals hunt for food: we’re trying to hunt down the design flaws in the user interface and must optimize a series of studies for total gain, rather than spend too much on any one study.

  • How To Setup a Mobile Usability Test

    There are a lot of elements involved in a mobile usability test. In this video, we’ll walk you through an example test setup, including the necessary equipment, and discuss how to prepare for a test.

  • Usability Testing with 5 Users: ROI Criteria (video 2 of 3)

    The number of test participants for qualitative usability testing that optimizes return-on-investment is determined by 2 parameters: the facilitator’s observational skills and the design team’s speed when generating the next design iteration.

  • How to Test Visual Design

    Visual design details like fonts and colors can have subtle but important effects on the overall user experience. Use research methods that are sensitive to these effects to test your visual design.

  • Usability Testing with 5 Users: Design Process (video 1 of 3)

    Formative usability testing is best done with a small number of study participants, so that you have time and budget to test more design iterations of the user interface.

  • The Word “Validate” Undermines UX Effectiveness

    Our words define UX research goals for users, stakeholders, and teams. Turning UX research into improved design is already challenging. Why make it more so by setting unsuitable expectations with the words we use to describe research?

  • How to Setup a Desktop Usability Test

    There are a lot of elements involved in usability studies with a desktop computer. In this video, we’ll walk you through an example test setup, including the necessary equipment, and discuss how to prepare for a test.

  • User Testing: Why & How (Jakob Nielsen)

    There is no excuse for not performing usability studies. They’re fast and cheap, and very convincing. Test with representative customers using realistic task, then be amazed by what you observe.

  • Between-Subjects vs. Within-Subjects Study Design

    In user research, between-groups designs reduce learning effects; repeated-measures designs require fewer participants and minimize the random noise.

  • 5-Second Usability Test

    The 5-second test is a simple usability technique to help designers gauge the audience’s first impressions of a webpage.

  • User Testing Facilitation Techniques

    Facilitate better usability studies with these 3 techniques: Echo, Boomerang, and Columbo. These methods allow you to get clarification from participants with minimal disruption or bias.

  • Remote Moderated Usability Tests: How and Why to Do Them

    Remote unmoderated usability testing is so fast and easy that some teams make it their only evaluation method. But don’t shy away from its more robust alternative, the remote moderated usability test, which can give you more information and is also inexpensive.

  • Card Sorting: Uncover Users’ Mental Models for Better Information Architecture

    Card sorting is a UX research technique in which users organize topics into groups. Use it to create an IA that suits your users’ expectations.

  • Affinity Diagramming for Collaboratively Sorting UX Findings and Design Ideas

    Affinity diagramming has long been used in business to organize large sets of ideas into clusters. In UX, the method is used to organize research findings or to sort design ideas in ideation workshops.

  • Turning Analytics Findings Into Usability Studies

    Tips for translating UX issues found in analytics into user research. Analytics tell you what customers are doing, but not why they are doing it. Pairing analytics and user research will provide you with clearer answers.

  • Usability Test, Even When You Know the Answer

    Evidence from usability studies can be more convincing than what you say. Even if you can easily determine the difference between good and bad designs, test them anyway.

  • Writing Tasks for Quantitative and Qualitative Usability Studies

    All usability studies involve asking participants to perform tasks, but the correct way to write those tasks depends on the methodology you’re using. Good quantitative tasks are concrete and focused, while good qualitative tasks are open-ended, flexible, and exploratory.

  • Avoid Leading Questions to Get Better Insights from Participants

    In user research, the facilitator’s choice of words can affect the participants’ feedback or behavior.

  • Previous «  1   2   3   4   5   6  » Next
Advertisements
Create your website at WordPress.com
Get started
%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close