https://www.nngroup.com/articles/complex-application-design/?utm_source=Alertbox&utm_campaign=f1070d165d-ComplexApps_AR_RemoteFieldStudies_20201109&utm_medium=email&utm_term=0_7f29a2b335-f1070d165d-40626629

8 Design Guidelines for Complex Applications

Users prefer to start working with a system immediately, no matter how complex the system might be. They usually want to start completing tasks without having to worry about reading documentation or following tutorials. This means that many users learn by trial and error. Designers should work to support this type of learning by allowing them to experiment safely. Offering previews of the result of an action in the system can offer this type of support. 

 1 - Promote Learning By Doing

 Most users do not become expert users on their own. After some time, users will become stagnant with their efficiency with a system. They will keep using methods that might be inefficient but still familiar/satisfying to use. This can reduce productivity, so designers should try and implement ways to inform the user of more efficient methods. These designs should inform users in a non-obtrusive manner (not long tutorials). 

2 - Help Users Adopt More Efficient Methods

Users often have unstructured goals in a complex software. As such, they don't often follow a linear task flow, as they need to analyze and adapt their goals over time. Designers should support this by avoiding designs that force users to complete a task from start to finish with no way to exit.  

"For example, provide methods that allow for skipping ahead, looping back to an earlier step, and moving fluidly from any step to any other."

3 - Provide Flexible and Fluid Pathways

Data is complex apps can be overwhelming to users. Especially if the data takes a long time to compile and might be faced with interruptions. Designers should then allow for users to keep a record of their actions/thought process during their task. An example might be to have an open-text box that users can write comments in while processing data. 

4 - Help Users Track Actions and Thought Processes

Users of complex applications often have to switch between different types of software to support their work. This can include accessing an external database or other forms of documentation. As such, designers should design for this by making features that support exporting and importing data from other platforms. For example, being able to import or export data from Microsoft Excel. 

5 - Coordinate Transition Among Multiple Tools and Workspaces

Complex applications can be very cluttered, as they intend to support a wide range of uses and features. Complex applications must also support both new and expert users . With this in mind, designers should try to reduce clutter without reducing capability as much as possible. 


6 - Reduce Clutter Without Reducing Capability

Large-scale information can be overwhelming to users if displayed all at once. As such, designers should create different layers to information (primary and secondary). It is important to showcase primary information first. Secondary information should be available without leaving the primary information screen. For example, hovering on a piece of information will reveal secondary information. 

7 - Ease Transition Between Primary and Secondary Information

The UI of a complex application can have much information present on screen at once. As such, designers need to distinguish the most important information by having it be visually salient to the users, This can mean not only adding weight to a UI element, but also by removing non-essential elements from nearby. 

8 - Make Important Information Visually Salient

Complex applications are extremely diverse. However, they do have general issues they can face, even across different applications. These 8 guidelines can help address those general issues and improve user efficiency.   
 
1. Promote learning by doing.
2. Help users adopt more efficient methods to do their tasks.
3. Provide flexible and fluid pathways through workflows.
4. Help users track actions and thought processes.
5. Coordinate transition among multiple tools and workspaces.
6. Reduce clutter without reducing capability.
7. Ease transition between primary and secondary information.
8. Make important information visually salient.

University of Michigan - Ann Arbor

- Tooltip Guidelines
- 10 Usability Heuristics for User Interface Design
- Visibility of System Status (Usability Heuristic #1)
- 5 Steps to creating a UX-Design Portfolio
- Complex Application Design: A 5-Layer Framework
- 8 Design Guidelines for Complex Applications
- Feature Richness and User Engagement
- Usability Heuristic #8: Aesthetic and Minimalist Design
- Social Media User Experience
- The Top Enduring Intranet-Design Mistakes: 7 Deadly Sins
- State-Switch Controls: The Infamous Case of the "Mute" Button
- Design Systems 101
- Interaction Cost
- Similarity Principle in Visual Design
- Design to Match the Medium
- Learnability vs. Efficiency in User Interface Design
- Cards: UI-Component Definition

Nielsen Norman Group Articles

"Tooltips are user-triggered messages that provide additional information about a page element or feature. Although tooltips aren’t new to the web, they are often incorrectly implemented."

Tooltip Guidelines

These 10 general principles for interaction design, created by Jakob Nielsen, are broad rules of thumb rather than specific usability guidelines.

1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation

10 Usability Heuristics for User Interface Design

"Summary: A portfolio highlighting your design process and past work shows others who you are as a designer. The process of creating a UX-design portfolio allows you to reflect on your skills and achievements."

- What Hiring Managers Are Looking For
- Putting It Together
- Navigating Roadblocks

5 Steps to creating a UX-Design Portfolio

When designing for a complex application, designers should consider 5 layers of complexity based on context for the application's use.

- Integration
- Information
- Intention
- Environment
- Institution

Complex Application Design: A 5-Layer Framework

"Summary: The more engaged users are, the more features an application can sustain. But most users have low commitment -- especially to websites, which must focus on simplicity, rather than features."

Feature Richness and User Engagement

Summary: "No. 8 of the top 10 UX design heuristics is to remove unnecessary elements from the user interface and to maximize the signal-to-noise ratio of the design."

Usability Heuristic #8: Aesthetic and Minimalist Design

There are elements within social media that make it compelling to use and it is a way for users to connect with people around the world without necessarily having to meet the person. Social media generates a way for users to reconnect with people from their past and haven't had the chance to interact with them in a while. 


Social Media User Experience

Intranet tools and programs come and go, but bad UIs linger for years, impact employee productivity and morale, and ultimately increase organizational costs.

The Top Enduring Intranet-Design Mistakes: 7 Deadly Sins

Summary: "On–off controls that switch between two different system states need to clearly communicate to users both the current state and the state the system will move to, should the user press that control."
- Two Pieces of Information, Two Controls
- Two Pieces of Information, One Control
- State-Switch Control Recommendations

State-Switch Controls: The Infamous Case of the "Mute" Button

"Summary: A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels."

Design Systems 101

"Summary: The interaction cost is the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals."

User actions that add to interaction cost can include scrolling, reading, looking around for information, page loads, typing, and etc.

Interaction Cost

"Summary: Design elements that appear similar in some way — sharing the same color, shape, or size — are perceived as related, while elements that appear dissimilar are perceived as belonging to separate groups."

Similary Principle in Visual Design

"Avoid a one-size-fits-all approach to UX design. Consider the the strengths and weaknesses of each platform when presenting information."

For a great user experience, designers should try to take advantage of the strengths of each specific medium or platform, and do their best to overcome or avoid the weaknesses and limitations of each platform.

Design to Match the Medium

Summary: The most fundamental usability components or metrics are learnability, efficiency, memorability, errors, and satisfaction. This video focuses on two of these; learnability and efficiency. Although these two concepts. arerelated, there is an important distinction.

Learnability vs Efficiency in User Interface Design

"Summary: A "card" is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card." Thus, a card can be defined as "a container for a few short, related pieces of information. It roughly resembles a playing card in size and shape, and is intended as a linked, short representation of a conceptual unit. A lot of high-profile sites such as Google (Material Design), Pinterest, or Twitter use cards."

Learn Before

Related

Learn After