What is Timeless Web Design?

Let’s say you took on a client, and they wanted something very specific from you. They wanted a website that without any changes at all, would still look good in 10 years.

Turns out, when you pose this question to a bunch of web designers and developers, the responses are hugely variant!

The Bring It On Crowd

There are certain folks who see this as an intreguing challenge and would relish the opportunity.

The “Keep It Simple” Crowd

This is mostly where my own mind went:

Plus of course some nods to Motherfucking website and Better Motherfucking Website.

The “Nope” Crowd

An awful lot of folks would straight up just say no. Half?

To be fair, we didn’t exactly set the stage with a lot of detail here. I bet some folks imagined these clients as dummies that don’t know what they are asking.

I wonder if the client presented themselves well, clearly knew what they were asking, and were happy to pay for it, if many of these designers would have responded differently.

Still, curious that so many designers didn’t see any the challenge here, just the absurdity.

The “Let’s Get Technical” Crowd

I’m partially in this group! What things can and should we reach for in this project, and what should we avoid?

“No external calls” seems particularly smart here.

Based on experience and observation in my time in the industry, I’d say it’s somewhere around 75% of websites are completely gone after 10 years, let alone particular URL’s on those websites being exactly the same (reliable external resources).

The “It’s About The Content” Crowd

The “See Existing Examples” Crowd

Plus things like Wikipedia and Space Jam. Also see Brutalist Websites.

Interesting Takes

Our very own Robin Rendle had an interesting take. Due to population growth, growing networks, and mobile device ubiquity, they site may not want to be in English, especially if it has a global audience. Or at least, be in multiple major world languages.

Leave it to Sarah to come in for the side tackle:

And Christopher to give us some options to keep them on their toes:

Why do any design at all?

Although I might argue in that case, you might as well make it an `.html` file instead of `.txt` so you can at least hyperlink things.

My Take

Clearly “it depends” on what this website is supposed to accomplish.

I can tell you what I picture though when I think about it.

I picture a business card style website. I picture black-and-white. I picture a clean and simple logo.

I picture really (really) good typography. Typography is way older than the web and will be around long after. Pick typefaces that have already stood the test of time.

I picture some, but minimal copy. Even words go stale.

I picture the bare minimum call to action. Probably just a displayed email address. I’d bet on email over phones.

Technically, I think you can count on HTML, CSS, and JavaScript. I don’t think anything you can do now with those languages will be deprecated in 10 years.

Layout-wise, I’d look at doing as much as you can with viewport units. Screens will absolutely change in size and density in 10 years. Anything you can make SVG, make SVG. That will reduce worry about new screens. Responsive design is an obvious choice.

Anything that even passably smells like a trend, avoid.

Inputs will also definitely change. We’re already starting to assume a touch screen. Presumably, you won’t have to do anything overly interactive, but if you do, I wouldn’t bet on a keyboard and mouse.

I’d also spend time on the hosting aspects. Register the domain name for the full 10 years. See if you can pre-buy hosting that long. Pick a company you’re reasonably sure will last that long. Use a credit card that you’re reasonable sure will last that long. Make sure anything that needs to renew renews automatically, like SSL certificates.


More thoughts, as always, welcome in the comments.


What is Timeless Web Design? is a post from CSS-Tricks

Source: CSS Tricks

Chrome 60

The latest version of Chrome, version 60, is a pretty big deal for us front-end developers. Here’s the two most interesting things for me that just landed via Pete LePage where he outlines all the features in this video:

Direct Link to ArticlePermalink


Chrome 60 is a post from CSS-Tricks

Source: CSS Tricks

The Browser Statistics That Matter

In which I argue that the only browser usage statistics that make sense use for decision making are the ones gathered from the website being worked on itself.

The reason you can’t use global statistics as a stand-in for your own is because they could be wildly wrong … Sites like StatCounter that track the worldwide browser market are fascinating, but I’d argue largely exist as dinner party talk.

Direct Link to ArticlePermalink


The Browser Statistics That Matter is a post from CSS-Tricks

Source: CSS Tricks

How To Protect Your Users With The Privacy By Design Framework






 



 


In these politically uncertain times, developers can help to defend their users’ personal privacy by adopting the Privacy by Design (PbD) framework. These common-sense steps will become a requirement under the EU’s imminent data protection overhaul, but the benefits of the framework go far beyond legal compliance.

If you are collecting personal data, you have to abide by the rules

Let’s give credit where credit is due. The global political upheaval of the past 12 months has done more to get developers thinking about privacy, surveillance and defensive user protection than ever before. The risks and threats to ourselves, and to our users, are no longer theoretical; they are real, they are everyday, and they are frightening.

The post How To Protect Your Users With The Privacy By Design Framework appeared first on Smashing Magazine.

Source: Smashing Magazine

How to be evil (but please don’t!) – the modals & overlays edition

We’ve all been there. Landed on a website only to be slapped with a modal that looked something like the one below:

Hello darkness, my old friend.

For me that triggers a knee-jerk reaction: curse for giving them a pageview, close the tab, and never return. But there’s also that off case when we might actually try to get to the info behind that modal. So the next step in this situation is to bring up DevTools in order to delete the modal and overlay, and maybe some other useless things that clutter up the page while we’re at it.

This is where that page starts to dabble in evil.

We may not be able to get to the DevTools via “Inspect Element” because the context menu might be disabled. That one is easy, it only takes them one line of code:

addEventListener('contextmenu', e => e.preventDefault(), false);

But hey, no problem, that’s what keyboard shortcuts are for, right? Right… unless there’s a bit of JavaScript in the vein of the one below running:

addEventListener('keydown', e => {
  if(e.keyCode === 123 /* F12: Chrome, Edge dev tools */ || 
    (e.shiftKey && e.ctrlKey && (
     e.keyCode === 73 /* + I: Chrome, FF dev tools */ || 
     e.keyCode === 67 /* + C: Chrome, FF inspect el */ || 
     e.keyCode === 74 /* + J: Chrome, FF console */ || 
     e.keyCode === 75 /* + K: FF web console */ || 
     e.keyCode === 83 /* + S: FF debugger */ || 
     e.keyCode === 69 /* + E: FF network */ || 
     e.keyCode === 77 /* + M: FF responsive design mode */)) ||
    (e.shiftKey && (
     e.keyCode === 118 /* + F5: Firefox style editor */ || 
     e.keyCode === 116 /* + F5: Firefox performance */)) ||
    (e.ctrlKey && e.keyCode === 85 /* + U: Chrome, FF view source */)) {
    e.preventDefault();
  }
}, false);

Still, nothing can be done about the browser menus. That will finally bring up DevTools for us! Hooray! Delete those awful nodes and… see how the page refreshes because there’s a mutation observer watching out for such actions. Something like the bit of code below:

addEventListener('DOMContentLoaded', e => {
  let observer = new MutationObserver((records) => {
    let reload = false;
    
    records.forEach((record) => {
      record.removedNodes.forEach((node) => {
        if(node.id === 'overlay' && !validCustomer())
          reload = true;
      });

      if(reload)
        window.location.reload(true);
    });
  });
	
  observer.observe(
    document.documentElement, {
      attributes: true,
      childList: true,
      subtree: true,
      attributeOldValue: true, 
      characterData: true
    }
  );
});

“This is war!” mode activated! Alright, just change the modal and overlay styles then! Except, all the styles are inline, with !important on top of that, so there’s no way we can override it all without touching that style attribute.

Screenshot of developer tools showing elements with a lot of inline styles with !important on the tail of the values.
Oh, the !importance of it all…

Some people might remember about how 256 classes override an id, but this has changed in WebKit browsers in the meanwhile (still happens in Edge and Firefox though) and 256 IDs never could override an inline style anyway.

Well, just change the style attribute then. However, another “surprise” awaits: there’s also a bit of JavaScript watching out for attribute changes:

if(record.type === 'attributes' && 
   (record.target.matches && 
    record.target.matches('body, #content, #overlay')) && 
   record.attributeName === 'style' && !validCustomer())
  reload = true;

So unless there are some styles that could help us get the overlay out of the way that the person coding this awful thing missed setting inline, we can’t get past this by modifying style attributes.

The first thing to look for is the display property as setting that to none on the overlay solves all problems. Then there’s the combo of position and z-index. Even if these are set inline on the actual overlay, if they’re not set inline on the actual content below the overlay, then we have the option of setting an even higher z-index value rule for the content and bring it above the overlay. However, it’s highly unlikely anyone would miss setting these.

If offsets (top, right, bottom, left) aren’t set inline, they could help us shift the overlay off the page and the same goes for margin or translate properties. In a similar fashion, even if they’re set inline on the overlay, but not on the actual content and on the parent of both the overlay and the content, then we can shift this parent laterally by something like 100vw and then shift just the content back into view.

At the end of the day, even a combination of opacity and pointer-events could work.

However, if the person coding the annoying overlay didn’t miss setting any of these inline and we have that bit of JS… we cannot mess with the inline styles without making the page reload.

But wait! There’s something that can override inline values with !important, something that’s likely to be missed by many… and that’s @keyframe animations! Adding the following bit of CSS in a new or already existing style element brings the overlay and modal behind the actual content:

#overlay { animation: a 1s infinite }

@keyframes a { { 0%, to { z-index: -1 } } }

However, there might be a bit of JavaScript that prevents us from adding new style or link elements (to reference an external stylesheet) or modifying already existing ones to include the above bit of CSS, as it can be seen here.

if(record.type === 'characterData' && 
   record.target.parentNode.tagName.toLowerCase() === 'style')
    reload = true;			
record.addedNodes.forEach((node) => {
  if(node.matches && 
     node.matches('style:not([data-href]), link[rel="stylesheet"]'))
      reload = true;
});

See the Pen How to be evil (but please don’t) by Ana Tudor (@thebabydino) on CodePen.

But if there already is an external stylesheet, we could add our bit of CSS there and, save for checking for changes in a requestAnimationFrame loop, there is no way of detecting such a change (there have been talks about a style mutation observer, but currently, we don’t yet have anything of the kind).

Of course, the animation property could also be set inline to none, which would prevent us from using this workaround.

But in that case, we could still disable JavaScript and remove the overlay and modal. Or just view the page source via the browser menu. The bottom line is: if the content is already there, behind the overlay, there is absolutely no sure way of preventing access to it. But trying to anyway is a sure way to get people to curse you.

I wrote this article because I actually experienced something similar recently. I eventually got to the content. It just took more time and it made me hate whoever coded that thing.

It could be argued that these overlays are pretty efficient when it comes to stopping non-technical people, which make up the vast majority of a website’s visitors, but when they go to the trouble of trying to prevent bringing up DevTools, node deletions, style changes and the like, and pack the whole JavaScript that does this into hex on top of it all, they’re not trying to stop just non-technical people.


How to be evil (but please don’t!) – the modals & overlays edition is a post from CSS-Tricks

Source: CSS Tricks

10 Free Video Tutorials For Learning Sketch

YouTube is the best place to teach yourself anything in the modern era. Techie subjects are covered in greater detail because most tech-savvy people also know how to record videos and get them online.

One of the newer design programs, Sketch, has been giving Photoshop a run for its money. This is an OSX-only program, but it’s made specifically for web and mobile designers.

It can feel a little strange coming from an Adobe background, but with the right tutorials anyone can learn it, and in this guide, I’ve curated the best Sketch tutorials to get you started with the basics and beyond.

iOS Calendar in Sketch 3

ios calendar tutorial

Mobile iOS apps are simple to design because they come with screen restrictions and clear guidelines for the designer. That’s why this iOS video tutorial is a great place to start learning Sketch.

Over the course of a half hour you’ll learn the fundamentals of icon design, vector creation, color selection, and keyboard shortcuts. The narration is easy to follow, and you can do all of this on your own with just a copy of the program.

If you’re hoping to learn more about icon design or mobile app design, then this video is for you.

Intro to Sketch for Web Design

intro web design sketch video

Alternatively you might be looking to use Sketch for website design. In that case you’ll love this brief intro from London designer Charli Marie.

If you’re a complete beginner then picking up Sketch can be a hassle, but this is particularly the case for websites where you need to consider responsive layouts, grid systems, and more intricate nuances like textures/patterns on the page.

Granted this video will not make you a complete Sketch master or an expert web designer. But it’ll offer a very clear introduction to the program so you can get up and running fast.

Simple Menu UI/UX

uiux sliding menu sketch

Diving into the more detailed side of design is this Sketch 3 tut covering how to make a sliding nav menu.

This video follows a very simple process of designing a slide out menu on top of an existing interface. Most mobile designers need to do something like this since the sliding menu is the most common choice for responsive menus.

And you can follow this tutorial with the newer version covering another method of designing a vertical slide-out menu.

Nike Store UI Redesign

nike store ui redesign

Another way to practice design is by re-creating interfaces. For example this tutorial teaches you how to redesign a Nike product page in Sketch 3.

It spans about half an hour with guides on working with vectors, basic page shapes, color schemes, textures, and pretty much everything else you’d need to learn.

This video will not make you an expert, but it’s definitely a fun way to get started in this design software.

Dropbox UI/UX Redesign

dropbox ux sketch video

Here’s another cool example from the same YouTuber teaching you how to redesign Dropbox in Sketch. It’s just about the same length of time, and the process feels similar, but there’s also a very unique methodology in this video.

You’ll learn more about matching the colors/textures/icons with Dropbox’s branding and how to design around the company’s image. So you’re not just learning how to use Sketch, but also how to design with specific goals and criteria.

Definitely a unique tutorial for web designers and the final result is fantastic.

Minimalist Website in Sketch 3

minimalist freebie sketch

If you’re looking for a simpler introduction, you might try this tutorial created by Hacksaw Academy. It’s one of the newest videos in this list, and it teaches you how to create a minimalist website mockup from scratch.

In total the video spans 15 minutes which isn’t too long for a design tutorial.

But the final result is also very simple, so beginners won’t feel too overwhelmed. This makes for an excellent starting point to pick up Sketch, but I recommend going beyond this tutorial if you really want to master the program.

Design a Landing Page

landing page video series

Designer Adam Rasheed went above & beyond with his landing page video tutorial covering all the major aspects of Sketch.

This tutorial breaks up into five parts with the very first video totaling over 90 minutes long. Talk about detailed!

You’ll learn about the proper workflow used to create a web page mockup and how you can follow this in future projects. Plus Adam gets into detail on how to create certain page elements like navigation menus, signup forms, and thumbnail galleries.

Basic iOS App Mockup

simple ios mockup sketch

The entire SketchCasts YouTube channel is full of great advice for beginners and experts alike. Sketch has a lot of features, and this channel covers all of them in practical lessons.

I specifically recommend starting with their iOS app mockup tutorial which feels more like a wireframe than a mockup. But you’ll learn all the fundamentals of designing a page by setting dimensions, grids, and proper alignments.

All the techniques you’ll learn in this video apply to professional design work no matter what type of interface you’re creating.

Button System with Nested Symbols

buttons nested symbols

If you wannt to get a little more technical then check out this tutorial on nested symbols in Sketch. This is a unique property of the software and you could learn it through other guides online.

But this 30-minute tutorial shows you visually how to create a Sketch library of buttons using nested symbols in your work. It’s an incredibly practical approach to nested symbols, and you’ll take a lot away from the experience.

However this is not really made for absolute beginners. You should at least have some comfort tinkering in Sketch before diving into this video.

Flexbox for Sketch App

sketch flexbox video tutorial

Modern web designers need to follow responsive techniques. This holds true for frontend development and basic mockup design/wireframing.

In Sketch this process is super easy and this tutorial shows you how it’s all done. This video guide uses the auto-layout plugin made solely for Sketch as a responsive design tool. If you’re a web designer moving into Sketch then this video is a must-watch.

But you can also read through the written article if you prefer that instead.

Fast Prototyping with Sketch, Invision and Craft

invision craft sketch tutorial

Before tackling a full mockup you may want to prototype your website or application. This is like a visual plan for how all your pages fit together and how users traverse the interface.

With this video tutorial you’ll learn how to setup Sketch and how to connect it with two other programs: InVision’s backend along with the free Craft plugin.

An excellent guide for skilled designers who want to work more with prototyping in their day-to-day.

These are my top picks for free Sketch video tutorials but there are many more released each year. If you want to continue the search, try browsing YouTube to see what else you can find.


Source: 1st Web Designer

Interesting New Newsletter Design Trends

Newsletters have long been a necessary aspect of marketing. While in the early years, designs were basic and uninspiring, we are now seeing some extraordinary examples of companies and individuals look to separate themselves from the competition and deliver something with high visual appeal to subscribers.

In this article, we are going to take a look at the latest newsletter design trends and showcase some of the most effective examples in circulation.

Attention-Grabbing Imagery

As users’ inboxes are busier than ever, companies only have a split second to grab attention as emails are flicked through and discarded at a mere glance. One way to do so is through bright and colorful imagery which stands out while also conveying a message and acting as a CTA area.

newsletter design trends

Minimal Content

Similarly, email content is down-sizing to ensure they don’t lose users’ attention with overly long content sections and text areas. The content is kept precise and to-the-point, allowing the user to gather necessary information in just a few of seconds.

newsletter design trends

Brutalism

Brutalism has also found its way across to newsletter design. It is particularly effective in promoting artists’ music such as in Beck’s example below. It uses long, distorted drop shows, bright colors, collage imagery, and basic upper and title case typography.

newsletter design trends

Bright & Vibrant Colors

Bright color usage is especially effective in drawing a user’s attention and adds much visual interest to what would, as you will see from the below example, otherwise be a somewhat underwhelming newsletter that could easily be glanced over or missed while checking your inbox.

newsletter design trends]

Focus on Typography

Typography is an excellent medium for carrying a brand in an email newsletter. So often, newsletters do not conform to the same standards as their counterpart website.

The below example uses typography elements sparsely but with purpose, including important information such as location and dates, and emphatic type for the company name. It results in a poster-like appearance – great for demanding attention and showing off a product or clothing line.

newsletter design trends

Have you received a remarkably designed newsletter recently? If you have, share it with us below!


Source: 1st Web Designer

One Illustration, Three SVG outputs

Let’s say we draw the same vector graphic in different design applications and export each one as SVG for use on the web. Should we expect the same SVG file from each application?

On the one hand, we might expect each file to be the same because of our past history with exporting images. Applications have typically been consistent at saving JPGs, PNGs, and GIFs with perhaps minor differences to the overall file size.

On the other hand, SVG is different than our typical image file and our expectations might need to adapt to those differences. The output of SVG might be visual, but what we’re really talking about is math and code. That means an SVG file is a little more comparable to a CSS file that has been compiled from a preprocessor. Your results may vary based on the method used to compile the code.

I decided to draw the same illustration in Illustrator, Sketch, and Figma and compare exported SVG code. This post will summarize those results.

About the Illustration

It’s nothing fancy. A basic plus sign with a white fill on top of a circle with a black fill. The idea was to use something that’s close to an icon that would be common on any site.

The illustration was drawn three times, once in each application. Making the icon in one application then copying and pasting it in another didn’t seem like a fair comparison. This allowed each application to interpret the SVG from its own native tools. I’m not the most skilled illustrator, so I made the illustration once, then traced it in the other applications to ensure everything was to scale and that all the points were nearly identical.

About the Comparison

It’s worth noting that this post is not at all concerned about the “best” export of the group. What’s more interesting is (1) whether there are differences in how SVG code is compiled and (2) how those possible difference might affect a front-end workflow or even influence which application is better suited for a particular project.

Here’s what is being compared:

  • File Size
  • Code Structure
  • Naming Standards

One more thing with mentioning is that we’re assuming default export options in this comparison. Illustrator has a robust set of options that can completely change how an SVG file is saved, where the others do not. I decided to use the default Illustrator export settings, with the minor exception of not minifying the code on export.

All good? Let’s look at the results.

Side by Side Code Comparison

See the Pen One Illustration, Three SVG Outputs by Geoff Graham (@geoffgraham) on CodePen.

Table Comparison

Comparison Illustrator Sketch Figma
Export Settings Yes No No
File Size 701 Bytes 946 Bytes 1 KB
XML Header No Yes No
Includes <height> and <width> attributes No Yes Yes
Includes viewBox Attribute Yes Yes Yes
SVG ID Yes No No
SVG ID Name Generated NA NA
SVG Data Name Attribute Layer Name NA NA
Title Tag (<title>) File Name Artboard Name Layer Name
Description Tag (<description>) NA Created with Sketch Created with Figma
Includes Definitions (<defs>) No Yes Yes
Includes Groups (<g>) Yes Yes Yes
Group ID Name NA Organized by Page Name, Artboard, Group, then Layer Organized by Frame, Group, then Layer
Includes Use (<use>) No No Yes

Comparison Summary

Those are some pretty interesting results. Like I mentioned earlier, the goal here is not to declare a winner of who does things best but to gauge whether there are differences — and there certainly are differences!

File Size

One huge benefit of SVG, in general, is its small file size versus raster images. That benefit shines in all three cases. For example, the same icon exported as a PNG in Sketch came out to 12KB. Sketch’s SVG output is 97% savings from its PNG counterpart.

I’m not particularly sure that the differences in file sizes between the three results here are all that crucial, despite the fact that Illustrator’s output results in a file size that is ~30% smaller than Figma’s output. I only say that because it’s likely that the SVG file that gets used in production gets minified and cached in the same fashion that makes it all very negligible.

That said, the fact that there is a file size difference at all might influence which build tools you use for your SVG workflow and how the settings for that build tool are configured.

Code Structure

The difference in file size really comes down to how each application structures the code it compiles. For example, where Figma is super into grouping and defining shapes and paths for the sake of making them more reusable in different contexts, Illustrator avoids them altogether and tends to make the file easier to drop inline.

Again, the goal is not to determine whether one approach is better than the other, but recognize that there are different philosophies going into the generated file and let that help determine the right tool for the current job. You might get a smaller file size in one instance, but perhaps more flexibility in another, depending on your needs and priorities.

Naming Standards

Another case in point is how Illustrator uses unique generated IDs on the <svg> element by default. That makes dropping the file inline much less likely to conflict with other inline files where a designer may have used the same file, artboard or layer names across multiple files. By contrast, neither Sketch nor Figma uses an ID directly on the SVG element.

There are build tools that will help craft ID and class names but, if you are tasked with editing an SVG file manually or have to use a file as it’s provided to you for some reason, then knowing how an application names things might influence how you approach your work.

Wrapping Up

The biggest takeaway for me from this comparison is a reminder that SVG is code at the end of the day. The applications we use to illustration vector graphics are simply a GUI for creating code and the way that code gets written is likely to be different based on who is writing it.

It’s really no different than something like the CodePen Rodeo (when is the next one, by the way?) where a single design is provided and many people go off to code it in their own ways. There is no “right” way to code it, but it’s fun to see how different people take different paths to achieve the same deliverable.

The bottom line underscored by this comparison is that we can’t take the assets we have for granted. As much as we may enjoy the fact that machines are willing to make decisions on our behalf, a front-end workflow is still overwhelmingly a subjective task and influences how we do our jobs.


One Illustration, Three SVG outputs is a post from CSS-Tricks

Source: CSS Tricks

The Missing Advice I Needed When Starting My Career






 



 


Do you ever wish you had a time machine? I certainly do, but not for the usual reasons. I want a time machine so I can go back and have a frank conversation with my younger self. I’ll let you in on a bit of a secret: My younger self was an idiot!

Look for inspiration beyond the web. Look to art, architecture and print design.

I have been working on the web for over 22 years now, and I feel like I wasted so many of those years. If only I could go back and share a few hard truths with myself at the start of my career. Unfortunately, I cannot, but I can share that advice with you.

The post The Missing Advice I Needed When Starting My Career appeared first on Smashing Magazine.

Source: Smashing Magazine

How to Run a Heuristic UX Evaluation

User experience development and optimization is a broad field. There are many facets of web design to consider in the development of a website. The factors affecting user experience, or UX, span from content production and page layout to website interactions.

Being able to identify usability issues with a user interface is called heuristics. It encompasses broad, qualitative rules that help determine the usability of your website and the overall experience your visitors are having.

To ensure better performance, designers use a heuristic evaluation, which is a way to test the overall UX of your site and if the site has usability issues. Your website’s UX is important and can have a big impact on your business and the success of your website.

Image via UsabilityGeek.com

A heuristic evaluation is different than user-testing because you are utilizing usability professionals instead of users. Sometimes, this approach is referred to as an expert review since you are getting professional feedback about your UX.

There are over 200 criteria that can be used when a site is being evaluated. Most businesses will determine the specific probes they want to be included in the evaluation. Many experts base their questions and responses on Jacob Neilson’s 10 Heuristics for User Interface Design.

Here is a closer look at those 10 heuristics:

1. Visibility of System Status

The system or website should always keep users in the loop about what is going on. This information is given to users through feedback in a reasonable time.

2. Match Between System and the Real World

The website should cater to a specific audience. The language used through phrases, words, and concepts should be relatable to that specific audience and fit into their worldview.

3. User Control and Freedom

Users will inevitably click on something by mistake, leading them to a page they don’t want to be on. An exit or return option should be available to them for a quick return.

4. Consistency and Standards

Platform conventions have been put in place, so your users do not have to wonder what your website means. Most users are familiar with these conventions. If your site is consistent, it should be easy for users to navigate and know what steps to take to reach a goal.

5. Error Prevention

Evaluators check for situations that could lead to an error page for your user. A good error message will send readers back to where they belong. An even better solution is removing any error-prone conditions on your website.

6. Recognizing Rather than Recalling

Your website should not require its users to remember information. Objects, actions, and options should always be visible, allowing them to keep up with your website’s dialogue without missing a beat.

7. Flexibility and Efficiency of Use

Accelerators are often used to speed up the process and interaction between experienced users and your website. This means that no matter the level of expertise of your user, your site will function at the same speed.

8. Aesthetic and Minimal Design

There should be no fluff or irrelevant information on your website. The design should be aesthetically pleasing and seamlessly incorporate relevant content and information for your users.

9. Helps Users Recognize, Diagnose, and Recover from Errors

Error messages should never include code and should simply explain the problem to users. It should suggest a quick solution that is easy for the user to follow.

10. Help and Documentation

It is most effective to have a system or website that does not require any help or documentation. If your system does require it, it should be easy to find, read, and carry out.

How to Run Your Evaluation

Planning and running your heuristic evaluation can be a long process.

Companies with expansive resources should hire at least three usability experts to perform the evaluation. Your team will decide upon the guidelines to be used during the evaluation, and then each expert will evaluate the site separately. Someone who is comfortable with the site should be available to the experts to answer any questions and record the process.

Before You Start

It is important to have a clear focus of who your users are before you begin the evaluation process. Develop personas or story maps for your users and make sure your website design caters to those individuals.

Consider the different tasks your users do when they are visiting your website. Most businesses prefer to rank these activities in order of importance. Take these tasks and relate them to the guidelines that will be given to the evaluators.

Develop a Method

After you have determined your guidelines and tasks the experts should be evaluating for, develop a method. Your evaluation method will include a system of severity codes the evaluators will be basing their responses on. Once the guidelines and methods are in place and your experts have been trained on them, it is time to run the evaluation.

Write a Report

When the heuristic evaluation is over, it is time to study the responses and write a report on the findings. Just like data, here’s where you gather the intel and analyze it. At this point, you can show developers the problems your users may have and come up with solutions for them.

Though you offer a written report, present your findings in person, if possible. This evaluation was done to test the functionality and UX of your website, and those who are involved in the process need to fully understand the findings – some of that may mean face-to-face interaction.

You will be reporting to the team of developers and key stakeholders in the business, so present the information tactfully and make it clear the recommendations for changes are for the betterment of the business.

Your report should include a list of the specific heuristics that were used in the evaluation. This will show the starting point that gave you your results. Explain who the experts are and their backgrounds to the group.

List the issues you discovered with the most important first. Then, give the audience solutions to how these problems can be fixed efficiently.

Your findings and report may mean some extra work for the developers, so give them as much information as possible about the findings so they understand how the UX is being affected and what they can do to fix it.

Can You Run a Heuristic Evaluation Without Experts?

Small start-ups or freelance web developers may not be able to afford a team of experts to evaluate their web design. In these situations, a more informal method called the heuristic markup can be helpful. This method does not provide professional results but can still be beneficial when testing your usability and UX.

Using this process, you set aside a few hours to walk through the website. Try to separate yourself from the development and act as a member of your target audience.

Keep in mind one of the personas developed for the business and perform the tasks as you imagine they would. Keep notes of your experiences as you move your way through the website, keeping track of areas where you got stumped or see a potential problem.

Insight Into UX Can Boost Your Website’s Traffic

Sometimes, why a website works well for a demographic can be a mystery, and these heuristic evaluations take some of the guesswork out of the process. Regardless of the size of your business, a heuristic evaluation of your website allows you to gain knowledge and experience about what your users are seeing.

Their experience on your website determines how long they stay, if they buy your product or service, and whether they return. Conducting an evaluation is the best way to discover potential problems and develop the best UX for your visitors.


Source: 1st Web Designer