Mediacurrent designer Becky Cierpich recently discussed the UX choices and persuasive techniques used in designing Area Alert, our open source emergency site. Our VP of Technical Operations, Jay Callicott, also discussed the beta release of the distribution and how Mediacurrent has worked with Pantheon to provide a free public upstream and 90 days of free hosting for qualifying organizations looking to develop the site quickly and efficiently for their needs.
This week, I’m excited to dive into the navigation choices we made for the distribution and how this can be best utilized when you are creating your site.
The Psychology Behind Our Navigation Design Choices
When you think about all of the information your site users need to get through the crisis at hand, you may be thinking about the emergency at hand and the people’s lives at stake. An intuitive navigation and establishing effective communication patterns may not be top of mind right away. However, your navigation should be a major factor into how your site is set up.
We can empathize with this need and created a navigation on Area Alert that is framed around what your users are looking for when they enter your site; namely, they are focused on fulfilling immediate physiological needs (such as access to food or shelter) one might find in Maslow’s hierarchy of needs. We created a navigation that would meet the basic requirements someone might search for in a crisis.
Along with the design patterns chosen, the navigation follows a Z-shaped pattern in that we utilize negative space to the left of the logo and around the search bar to give breathing room to the top part of the site. As the Gestalt principles in design highlight, negative space can be used to improve composition, which is what informed us to allow for space between elements in the navigation. We followed that with topics most important to users based on reviewing information about past widespread emergencies. For instance, we included sections like Urgent Help after learning about how the public had limited access to information when Hurricane Harvey disrupted typical emergency communication methods in 2017.
Arrows in the navigation are expected visual cues and indicate subpages for the main topics to guide the user to find information most relevant to them. Users who are looking for information regarding a crisis are already in a heightened sensitive state, and ensuring that even the smallest elements of your design align with the expectations is critical in a reassuring experience.
Our Top-Level Navigation Topics
The top-level navigation topics reflect some of the most pressing needs related to the current crisis, especially in terms of public health. We felt it was important to leave space for people to self-select and choose a bucket of topics most important to them because at any given time they may be in various levels of need or explore topics based on different aspects of their lives. A working parent who has a young child may want to explore topics relevant to their child’s virtual learning one day, but the next may want information about how the current crisis impacts their job.
We also employed digital psychology methods when thinking about the main ideas in our navigation—namely the Fogg Behavior Model. The model focuses on:
- Motivation – desire or willingness to do something
- Ability – possessing the means to do something
- And a trigger that compels us to take action
In order to understand users’ immediate needs and motivations, we reviewed several government sites, live press conferences, and user comments across social media to identify four main reasons for looking for content:
- Urgency – Users may have been in a time of need or loss with no time to click around
- General fact-finding – Users who went this route were typically validating something specific they heard about
- Timeliness – Users may feel nervous and want to be informed on the latest
- Authorative/Procedural – Users may be in a position of responsibility looking for guidelines and procedures relevant for their needs (e.g. an employer looking for guidelines relevant to his industry)
In general, we find that people using the site are likely highly motivated to find some of the top-level information, such as Urgent Help. In choosing this and other high-level topics in our main navigation, we have lowered the barrier of entry for users to take action through a consistent layout and sensible categorization of information.
“Resources For” Dropdown
We chose the personas (Residents, Employees, Employers, and Students) in the Resources dropdown section because our research indicated these users would be the likely ones looking for information.
In the current COVID-19 crisis, for instance, we know that many people have concerns about their employment situation and may want to know more about their rights. Employers are also an identified site visitor because they may be looking for information about how to keep their employees safe and this information may not be readily available from other sources.
We also recognize that some people may fit multiple categories. For example, a parent may want to navigate to Residents resources for some topics to better understand overall community issues and to Students resources at other times for topics that impact their child’s education.
In the current COVID-19 crisis, public health has been a major issue that site visitors are interested in learning about for their local area. Since mandates vary by locale and are being updated frequently, users may need a place to validate information they may have heard from family or on other channels.
We developed the navigation to work fluidly based on the emergency at hand, with our current COVID-19 pandemic in the forefront of our thoughts. In other situations, this section may be a navigation item that can be customized to fit other needs for a particular emergency issue.
As a main level navigation, All News provides users access to timely news content that impacts everyone. We determined this was a necessary navigation item because as much as people may want to self-select, they may also wish to catch up on information quickly without often returning to the site. Adding All News into the navigation allows them to look at information quickly in one set area.
Like All News, Urgent Help was developed with all personas in mind. We understand that people may be seeking information quickly, potentially experiencing loss or distress with little time or patience. They may not know where to start right away when they have an immediate need and this gives them a quick starting point. And just like the Public Health section, subtopics as part of Urgent Help may change depending on the particular emergency issue being faced at the time.
We created Area Alert to be versatile, and content editors will be happy to know that if they wish, they can use other components, such as the accordion from the FAQ page, to make their Urgent Help page a quick resource with answers to questions users may have answered right away.
User-Focused Navigation Designed with You in Mind
Mediacurrent, a long-time contributor to open source, is committed to creating community-focused solutions to emergency situations, such as the COVID-19 pandemic currently happening worldwide. We would love to help you with setup or walk you through the demo so it works how you’re expecting when you use it. We aspire to help both organizations and municipalities seeking ways to help their communities in any way we can, so please contact us to answer any questions you may have regarding Area Alert.