Usability guidance
Usability considerations
Research has shown that anything that interrupts the task flow or consuming the content is seen as annoying and deteriorates the experience. Avoid pop-ups and taking the user out of the task flow. Lessen the cognitive load by making it easy to stay on task.
Allow users to perform tasks in the same sequence and manner. For example, users become accustomed to looking in either the left or right panels for additional information. Also, users become familiar with the steps in a search or checkout process.
Let the computer perform as many tasks as possible, so that users can concentrate on performing tasks that actually require human processing and input. Reduce the user’s workload whenever possible .
Mobile first
Almost 50% of our members and 80% of the public are viewing our website with their mobile phones. This means that mobile considerations should come first in most cases. (There are some exceptions, including use cases where the doctors and the office staff are engaging with the content from desktops only, as they are using the information in there day-to-day admin or management type of duties.)
Performance over gimmicks and widgets
Research has shown that the performance of the site is one of the most important user experience factors. Don’t make design decisions that slow down the site: They are not worth the negative impact on usability and the entire experience.
Potentially affecting performance:
Advertising
3rd party widgets (such as social media share widget)
Tracking code
JavaScript animation libraries
Large graphics/images , embedded videos
Non-minified CSS (style sheets in code)
Hierarchy on the page is important
Make sure your pages have information hierarchy: There can be only on H1 per page. H1 is always followed by H2 and then H3 and so on. Hierarchy is important for readability, learnability as well as search. The logical UX reasons are there, but keep also in mind that Google will punish poorly formed pages by ranking them low. Our SEO will suffer from poor page hierarchy which will have a direct negative impact on the success rate of our website.
Chunk your text into sections by using white space and images.
This will make the content easier to read and retain. The CMS doesn’t necessarily give enough spacing between items: Add a
in code mode when needed.
Landing pages should be shorter
Use shorter pages for landing pages and navigation pages, or any page that requires quick browsing. Cards are a great way to build landing pages and make them visually appealing and interesting. Use longer pages for uninterrupted reading experiences for the actual articles.
Layout considerations
When people visit the website, they do not explore everything on the page carefully and in detail: they scan it to find a hook which would catch their attention and convince them to spend some time on the website. Different experiments collecting data on user eye-tracking have shown that there are several typical models along which visitors usually scan the website. The 3 most common ones are: Gutenberg Diagram, Z-Pattern, And F-Pattern. All these patterns have been found in thousands of eye-tracking studies.
Notice that in each pattern, the left upper corner is always what gets the viewers' attention first. And since humans tend to remember the first and the last things better than anything in between, they will not only notice first, but also remember whatever is placed in this location better. Obviously this is the most valuable piece of user interface. Place the most important message there and remember that it doesn't even have to be visually emphasized in red or otherwise in stark contrast with the rest of the page.
Accessibility
Accessibility is serious business
About 8% of the user population has a disability that may make the traditional use of a website very difficult or impossible. About 4% have vision-related disabilities, 2% have movement-related issues, 1% have hearing-related disabilities, and less than 1% have learning-related disabilities.
Accessibility and colors
Never use color as the only indicator for critical activities or in data visualization. Most users with color deficiencies have difficulty seeing colors in the green portion of the spectrum.
Select color combinations that can be discriminated by users with color deficiencies.
Use tools to see what web pages will look like when seen by color deficient users.
Use high contrast between text and its background.
Navigation
There are often navigational links at a standard location — usually across the top, bottom, or side of a page. For people using assistive devices, it can be a tedious and time-consuming task to wait for all of the repeated links to be read. Users should be able to avoid these links when they desire to do so.
Plugins
Third-party plugins can cause problems with assistive technologies. Test all your plugins for accessibility.
Videos and other non-text elements
Text equivalents should be used for all non-text elements, including images, graphical representations of text (including symbols), image map regions, animations and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds, stand-alone audio files, audio tracks of video, and video. Make sure videos have transcripts.
Graphic design considerations
Research has proven that images work better for recall than text. The images on the page will also be noticed first and work as a deciding factor for the user whether to stay on the page and delve deeper or to move on. Images have a very important role in the website for drawing attention to the most important content on the page, helping learning and adding joy and interest.
The case against PDFs
Why are PDFs not suitable for websites and mobile apps?
The format is intended for print. It’s inherently inaccessible, unpleasant to read, and cumbersome to navigate online.
There’s more work involved in creating a well-written, accessible PDF than creating a webpage.
Even the most polished PDFs look out of place on a website and especially on a mobile phone.
They are slow to load. Performance is one of the most important factors of good UX.
They cannot be navigated as the website. Even if the PDF has links, it doesn’t remedy the situation. In fact, having a PDF with it’s own information hierarchy can confuse things even more.
Consider the audience
Members
AAD members come from very different backgrounds: Solo practices, small practices, large medical groups, hospitals and research. It isn’t easy to find stock photography that will represent the entire membership. This is why we have chosen to use illustrations on our landing pages and wherever else appropriate. In our user research, members preferred illustrations over photography. They found the illustrations to be less distracting and more neutral than photography. Follow the branding guidelines for more detailed information on this.
When appropriate, use AAD's own photography instead of stock photos. There is a large library of photos from the meetings and education sessions.
Public
The public ends up on our site most of the time via Google searches for specific diseases or skin problems. They very rarely enter the site through the main landing page.
Find a balance between depicting diseases accurately but not frightening the viewers with detailed, clinical photos of severe cases of the condition. Using medical illustrations instead of photos can make learning about skin conditions more palatable for the general public.
As the public’s motivations are very different from the members when visiting our site, it should be also noted, that their visits are very brief: Using visual means of communication whenever possible, would be ideal: Data visualization, infographics, medical illustrations, videos.
Some things to know about our public audience:
Most of them are women looking for answers for skin problems for themselves or their children and spouses.
Almost 80% of them visit our site with their mobile phones. Take that small size into consideration when designing for the public!
Anything for the public goes through an extensive internal review. Please make sure to contact mlundberg@aad.org to find out more about the process.