Laws of UX Series: Miller’s Law, Peak-End Rule, and the Serial Position Effect.

Laws of UX are a collection of design heuristics created by Jon Yablonski to help designers leverage psychology to create more human-centered experiences. You can find explanations for each law on the website lawsofux.com, as well as an in-depth case study regarding his thought process on his website, jonyablonski.com

This will be a series of blog posts briefly covering the many laws and how they can help designers create better experiences for law firms.

 

Millers Law1) Miller’s Law

“The average person can only keep 7 (plus or minus 2) items in their working memory.”

Milller’s Law is named after George Miller, a cognitive psychologist who believed that the average number of objects the average human can hold in working memory is seven (plus or minus two).

Miller’s law suggest we use “chunking” in order to organize content in a way that will help users process and understand content easily. Chunking, meaning short “chunks” of information that users can read and scan quickly.

If your website consists of massive walls of content, it might be worth rewriting into grouped, shorter content that is easier to consume. Here are some guidelines to follow that will help you follow Miller’s Law and create content that is easier for your users to consume.

  1. Use bullet-points and easy to read headings.
  2. Try to keep text lines around 50-75 characters.
  3. Use clear visual hiarchy and group related items together

 

Peak-End Rule Poster2) Peak-End Rule

“People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.”

Think back to a particular memory. It could be your first concert, a holiday from your childhood or a family vacation. The memory that you recall is created from how you felt during its peak moments and how it ended. This is because users focus on the most intense points of an experience and the final moments.

This is important when thinking about your firm. Whether it’s your website, your intake or how you conduct yourself with your clients, people will only recall the most intense points and the final moments that they experienced with you. It is also important to point out that people recall negative experiences more instensly than positive ones.

Focus on the moments that your service has been the most helpful, or areas where you feel you excel the most and make them better.

 

Serial Position Effect3) Serial Position Effect

“Users have a propensity to best remember the first and last items in a series.”

The Serial Position Effect describes how the position of an item in a sequence affects how users recall them. You can find this being put to work in many website navigations. The items within the navigation that are most important are almost always on the far left and the far right (home being far left and contact being far right). This isn’t always the case, especially when designers feel the need to remove the navigation on desktop and opt for a hamburger menu (hint: don’t do that).

In order to minimize strain for your users, try to limit the number of options you have in your navigation, practice area cards, etc. In most cases, more is not necessarily better.

 

Laws of UX Series: Law of Proximity, Law of Similarity and the Law of Uniform Connectedness.

Laws of UX are a collection of design heuristics created by Jon Yablonski to help designers leverage psychology to create more human-centered experiences. You can find explanations for each law on the website lawsofux.com, as well as an in-depth case study regarding his thought process on his website, jonyablonski.com

This will be a series of blog posts briefly covering the many laws and how they can help designers create better experiences for law firms.

 

Law of Proximity1) Law of Proximity

“Objects that are near, or proximate to each other, tend to be grouped together.”

The Law of Proximity defines how the human eyes with how our eye and brain form connections with visual elements. Elements that are close together are perceived as a group and related to each other. Elements that have space between them establish a disconnect and are not related.

For example, paragraphs in a book or blog post follow the Law of Proximity by grouping specific sections of text together to form similar ideas. Also, take our contact form in our footer for example. By placing the contact information and form fields within the boundary of a box,  we have established that everything within that element is related to each other and focuses on one specific function.

 

 

Law of Similarity2) Law of Similarity

“The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.”

The Law of Similarity is similar (heh heh) to the Law of Proximity. While the Law of Proximity states that elements that are close together are perceived as a unified group, the Law of Similarity states that elements that are similar to each other are perceived as a unified group, even if they are not grouped together. Similarity can be defined as shape, color, size, orientation, etc.

 

 

 

3) Law of Uniform Connectedness

“Elements that are visually connected are perceived as more related than elements with no connection.”

The Law of Uniform Connectedness states that elements connected by uniform visual properties are perceived as a unified group more than elements that are not connected. Similar to the Law of Proximity, if a group of identical circles is enclosed in a box OR connected by a line, they are more closely related than the other circles that are outside of the box or not connected by a line.

 

 

Stay tuned for the next post in this series where I go over Miller’s Law, Peak-End Rule, and the Serial Position Effect.

Laws of UX Series: Hick’s Law, Jakob’s Law and the Law of Common Region.

Laws of UX are a collection of design heuristics created by Jon Yablonski to help designers leverage psychology to create more human-centered experiences. You can find explanations for each law on the website lawsofux.com, as well as an in-depth case study regarding his thought process on his website, jonyablonski.com

This will be a series of blog posts briefly covering the many laws and how they can help designers create better experiences for law firms.

 

UX Law Poster1) Hick’s Law

“Users often perceive aesthetically pleasing design as design that’s more usable.”

Users tend to assume that things that look better will work better, even if they aren’t actually more productive. Users who visit your website may have a positive emotional response to the visual design of your website, making them more tolerant of minor usability issues while using your site. When I say “minor usability issues” I mean text with low contrast, spelling errors, or typography that isn’t consistent. The Aesthetic Usability Effect does have its limits and when the design puts aesthetics over usability, users will lose patience and leave your site.

For example, I have seen law firm websites that include huge hero images on practice area pages that cover the entire screen without including any information until moving down the page. The page may look appealing at first with a large, beautiful image at the top, however, the image that is taking up the entire screen may be seen as an annoyance once they are trying to complete specific tasks.

 

 

2) Jakob’s Law

“Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.”

Fast websites are fun to use. Laggy, slow response websites suck. The longer it takes for your website to respond to a request, the longer your user is taking to think of what they want to do next. If you keep your users waiting, they will find what they are looking for on another law firm’s site. As a general rule, you want to provide feedback to a user’s request within 400ms in order to keep their attention.

If your website has any loading screens that aren’t imperative to the functionality of the site, fancy page transitions, or anything else that may slow down their experience with your site, you are doing more harm than good with those “cool” features.

 

 

3) Law of Common Region

“The time to acquire a target is a function of the distance to and size of the target.”

A touch target is an area that responds to user input. Make sure that all touch targets are large enough for users to understand their functionality and easily accessible for users to interact with.

Many law firm websites (and websites in general) have touch targets that aren’t clearly visible or are located in hard to reach places from where a users finger can reach(looking at you hamburger menus located at the top left or right on mobile screens). Make sure any touch target on your website is easily recognizable and accessible to avoid confusing your users.

 

 

Stay tuned for the next post in this series where I go over Law of Proximity, Law of Similarity, and the Law of Uniform Connectedness.

Laws of UX Series: Aesthetic Usability Effect, Doherty Threshold and Fitts’s Law

Laws of UX are a collection of design heuristics created by Jon Yablonski to help designers leverage psychology to create more human-centered experiences. You can find explanations for each law on the website lawsofux.com, as well as an in-depth case study regarding his thought process on his website, jonyablonski.com

This will be a series of blog posts briefly covering the many laws and how they can help designers create better experiences for law firms.

 

UX Law Poster1) Aesthetic Usability Effect

“Users often perceive aesthetically pleasing design as design that’s more usable.”

Users tend to assume that things that look better will work better, even if they aren’t actually more productive. Users who visit your website may have a positive emotional response to the visual design of your website, making them more tolerant of minor usability issues while using your site. When I say “minor usability issues” I mean text with low contrast, spelling errors, or typography that isn’t consistent. The Aesthetic Usability Effect does have its limits and when the design puts aesthetics over usability, users will lose patience and leave your site.

For example, I have seen law firm websites that include huge hero images on practice area pages that cover the entire screen without including any information until moving down the page. The page may look appealing at first with a large, beautiful image at the top, however, the image that is taking up the entire screen may be seen as an annoyance once they are trying to complete specific tasks.

 

 

2) Doherty Threshold

“Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.”

Fast websites are fun to use. Laggy, slow response websites suck. The longer it takes for your website to respond to a request, the longer your user is taking to think of what they want to do next. If you keep your users waiting, they will find what they are looking for on another law firm’s site. As a general rule, you want to provide feedback to a user’s request within 400ms in order to keep their attention.

If your website has any loading screens that aren’t imperative to the functionality of the site, fancy page transitions, or anything else that may slow down their experience with your site, you are doing more harm than good with those “cool” features.

 

 

3) Fitts’s Law

“The time to acquire a target is a function of the distance to and size of the target.”

A touch target is an area that responds to user input. Make sure that all touch targets are large enough for users to understand their functionality and easily accessible for users to interact with.

Many law firm websites (and websites in general) have touch targets that aren’t clearly visible or are located in hard to reach places from where a users finger can reach(looking at you hamburger menus located at the top left or right on mobile screens). Make sure any touch target on your website is easily recognizable and accessible to avoid confusing your users.

 

Stay tuned for the next post in this series where I go over Hick’s Law, Jakob’s Law and the Law of Common Region.

Your Logo Is Big Enough

As a designer, I receive many requests for changes by clients regarding a design that I have created. I almost always get asked, “The logo is small, can you make it bigger?”, “I can hardly see the logo, could you make that bigger?”. I understand that you may be proud of your logo and you want it to be prominent, however, the size of your logo isn’t the most important aspect of your website nor should it be the main focus of the site.

Many people also believe that their brand is their logo. A brand is much bigger than just a logo and it can be presented throughout the entirety of the design. Your brand is how your firm represents itself, how you treat clients, your messaging and positioning, the overall experience that someone has with your service and firm. Yes this does include your logo however the logo on your website should never distract the user from the messaging on your website and it should never compete with it.

Large logos can come off cheesy and look amateur. Take a minute to check out the size of the logo for these well-respected brands:

Screenshot of popular website headers

It’s a pretty slim chance that your firm can compete with the same brand recognition as Apple, J.Crew, Nike, and Target, but you can still strive to achieve a similar professional, polished look. Your logo isn’t the focal point of the design. It can throw off the entire balance of the design and make it look cheap if it’s too large.

That brings me to another issue and a shameless plug from yours truly. If your logo needs to be larger to read it, it’s not a good logo. Logos should be scalable and recognizable at any size. If you need an updated logo or a logo redesign OR BRANDING, hit us up.

I have a strong opinion that if you include LLC, Law Firm, Attorneys, etc in your logo – it’s unnecessary and looks a bit amateur. People, who come to your website are aware that you are a lawyer, or a law firm, or an attorney..get it? That goes for you too, Esquires.

Also, if you ABSOLUTELY need to make your logo bigger, please watch this video.

You Should Care About Accessibility

Recently I had a client cut me off mid-sentence with, “I’m going to stop you right there, I don’t care about that”.

I was in the middle of telling him why his current website did not meet WCAG guidelines and how we would fix this during redesign. We moved onto the next line item and I couldn’t stop thinking about why he should care. Everyone should care about making their site accessible.

Let’s say you are building your own store from the ground up.  There are specific requirements that you need to meet so that your building is up to code. You want as many people to be able to enter your store as possible, right? The same thing goes for your website. Your website is your digital storefront and should want to make sure that everyone can interact with it.

According to W3.org, web accessibility is defined as:

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can perceive, understand, navigate, and interact with the Web and contribute to the Web.

Here are some quick numbers for you. According to interactiveaccessibility.com with data from 2012:

• 56.7 Million Americans (18% of the population) have some type of disability

• An estimated 38.3 Million (12.6% of the population) have a severe disability

• 19.9 Million people (8.2% of the population) have difficulty lifting or grasping, making it difficult for them to use a mouse or keyboard.

• 15.2 Million people (6.3% of the population) have a cognitive, mental or emotional impairment

• 8.1 Million people (3.3% of the population) have a vision impairment and may need to rely on screen magnifiers or screen readers. They might also have some form of color blindness

• 7.6 Million (3.1% of the population) have a hearing impairment. Do the videos on your site have transcripts or captions?

There is a possibility that potential clients can’t utilize your site in some aspect, resulting in them leaving your site. Making your site accessible doesn’t only benefit users with disabilities either but making your site accessible to everyone no matter their situation. It means making your site accessible to users on mobile devices with smaller screens, elderly users with changing abilities, users who are impacted by “temporary disabilities” like a broken hand or people with “situational limitations” like being outside in bright light or in a waiting room where they can’t listen to audio.

Accessibility on the web is important and as a business owner, you should care about if your site is accessible or not.

Webinar: ADA Compliance – From a Lawyer and Designer

Listen to Mockingbird’s Design Lead, Ryan Sprouse and Taft Stettinius & Hollister’s IP, IT and Data Security Partner, Jeff Kosc to get down and dirty about ADA Compliance for websites. This webinar showcases what it’s actually like to interact with the web while disabled, reviews Web Content Accessibility Guidelines (WCAG) and discuss the most current legal thinking and precedent regarding ADA Compliance lawsuits related to websites.

 

https://mockingbirdmarketing.wistia.com/medias/i3q4yt2jkr?embedType=async&videoFoam=true&videoWidth=640

Tips to Make Sure Your Website Is Accessible

What is Web Accessibility?

What does the word accessibility mean? A quick Google search on “Accessibility” yields a result from Wikipedia stating, “Accessibility is the design of products, devices, services, or environments for people with disabilities.”

Google search result for Accessibility

 

Why Does It Matter?

The overall goal of web accessibility is to ensure that a website’s content and functionality is visible and can be operated by anyone. As a business owner you want to make sure that your website can be used by all of your potential clients. In order for you to reach the widest audience possible, your website has to be accessible.

What kinds of disabilities are we talking about?
  • Auditory
  • Cognitive
  • Neurological
  • Physical
  • Speech
  • Visual

Accessibility doesn’t always pertain to individuals who have disabilities. Web accessibility also includes:

  • Mobile devices, smart watches, smart TV’s, etc
  • Aging individuals
  • Individuals who are experiencing temporary disabilities like a broken arm
  • Individuals with situational limitations such as being outdoors where there is bright light or in a library where they cannot listen to audio

How to Ensure Your Website is Accessible:

Listed below are some simple steps you can check to see if your website is accessible on a basic level.

Page Titles:

Page titles are a short description of a webpage. They appear at the top of the browser as well as in the SERPs. They are used by screen readers as well as bookmarks and favorites. Make sure that you have a title that sufficiently describes the content on your webpage.

 

Title tag for Mockingbird website

Alternative (alt) tags:

Alt tags are used to describe an image when an image fails to load. They are also used by screen readers for users who may not be able to see the image. You can check to see if an image has alt tags within your content management system. Make sure that all alt tags are descriptive and specific.

Headings:

Headings are important for the overall structure of the page. Headings are ranked from H1 to H6 with H1 being the most important. Headings are also crucial for people who cannot use a mouse. Headings provide structure for people to navigate through the webpage with a keyboard or a screen reader. Make sure all pages within your website has an <h1> level heading for the title of the page. For more information regarding headings and how to correctly use them, check out Yoast’s outline on how to use headings properly.

Contrast:

It is easy to overlook something as simple as color when it comes to accessibility. Color contrast is important to keep in mind when designing a website. People who have impaired vision may not be able to read content on your website if the colors don’t comply with the Web Content Accessibility Guidelines (WCAG). To check whether your website follows the WCAG guidelines, you can use a contrast checker.

Check Your Site

The simple steps above are just the tip of the iceberg when in comes to web accessibility. Use this outline to quickly check if your website meets some of the basic requirements for digital accessibility and be certain that your website can reach the widest audience possible.

 

To read more into web accessibility, check out any of the websites below.

https://www.w3.org/WAI/

https://webaim.org/

https://www.washington.edu/accessibility/web/

 

Law Firm Branding: Bringing Brand Identity to Life

If you made a list of all the brands you see in a day, you’d probably be surprised. Brands are everywhere. Your clothes, electronic devices, the apps on your phone, your car, the bus you take to work and the cup or mug that your coffee is in. These are all examples that currently surround me as I sit on my train heading into work.

Brand identities allow individuals to connect with your brand, recognize it and believe in it. It encompasses the visual elements of the brand. This includes items like the brand’s name and logo, typography, colors, and any design elements that help set the brand apart from competitors, especially in the minds of potential clients.

Some of the main elements included in a brand identity are:

Logo:

This is where your brand begins to physically take form. We start brainstorming and sketching ideas using all of the research that we have gathered in order to create a logo that reflects your brand image.

Color Palette:

Users connect with color. Specific colors evoke specific emotions, feelings and experiences. Choosing the right color palette for your brand is important. You want to make sure your brand exudes the correct impression to your audience.

Typography:

Similar to color, typography has meaning for your brand as it portrays the value and overall tone of your brand. There are millions of typefaces to choose from and each one can provide a specific mood. Typography also helps with brand recognition (think of Coca Cola or Disney.)

Brand/Style Guide:

This is where it all comes together. We will put all of your brand identity materials inside a brand/style guide that helps ensure consistency throughout any medium that your brand will touch.

Our Plan For Success

Our next and final step in this series is to outline the path we follow in order to help you and your new brand succeed.

By pulling each of the above elements together in a way that represents and reinforces your firm’s core skills and values, you can create a successful brand identity in the eyes of your prospects and clients.