GenderMag Design Catalog
The software designs in this catalog had bias bugs. Using the GenderMag method, the designs were changed to be more inclusive. What is this site and how do I use it?

Back to GenderMag.org

Design Changes

List of design changes:
Ambiguous option?Help users understand; Add details
Detailed survey choices help risk-averse user move forward
Before

The third choice does not indicate that graduate courses are part of the Computer Science or Electrical & Computer Engineering dept.

Attitude Towards Risk: A risk-averse user may abandon the survey all together if they do not see an option that fits their specific task. They don't want to waste time on something that may not actually help them reach their end goal.

Also affects users with: low computer self-efficacy, comprehensive information processing style
After

The third choice now specifies "CS & ECE".

Attitude Towards Risk: This solution empowers a risk-averse user to comfortably move forward knowing they are on the right track. It also doesn't hurt a risk-tolerant user.

Adding more detail also helps users with: low computer self-efficacy, comprehensive information processing style
Ambiguous option?Help users understand; Add examples
Providing clear expectations and examples helps increase user confidence while answering questions
Before

Fields were marked with titles, but did not include examples or clarifications of the expectations for input.

Computer Self-Efficacy: Users with low computer self efficacy blame themselves for not knowing exactly how to answer each question.

Also affects users with: risk aversion, comprehensive information processing style
After

Added stars to required fields, clarifying statements ('please state if it will be required or recommended'), and an example ('eg math placement test').

Computer Self-Efficacy: Users with low computer self efficacy now feel confident moving forward knowing that they're inputting correct information. Additionally a user with high CSE won't be frustrated with the survey since they'll receive fewer feedback errors.

Providing clear examples and expectations also helps users with: risk aversion, comprehensive information processing style
Big wall of text?Help users process it; Add structure
Reformatting paragraphs of texts into encapsulated boxes helps users spend less time finding the correct information
Before

More than the necessary information is provided, and it is not easily digestible.

Attitude Toward Risk: A risk averse user doesn't want to be overwhelmed with information, and waste time reading the entire page.

Also affects users with: comprehensive information processing style, task-oriented motivations
After

Adding the "Learn more..." hyperlink gives users the freedom to choose whether or not they want to view more information,

Attitude Toward Risk: With this solution, a risk averse user isn't forced to read the full page - which could be a waste of time. This doesn't hinder a risk-tolerant user since they wouldn't have experienced this pain point.

Encapsulating large chunks of information this way also benefits users with: comprehensive information processing style, task-oriented motivations
Difficult first task?Help users get started; Give them a smaller, well-explained task
Step-by-step instructions for documentation contributions help newcomers
Before

Contributing to an OSS project can be intimidating for newcomes, especially if they believe their only option requires altering the project's code. This project only provided instructions for how to complete a code contribution and gave no instructions or even indications that a documentation contribution was possible.

Learning Style: A process-oriented learner wants to follow step-by-step instructions rather than tinker around the project or go through the coding setup (which requires much more work) to make a documentation contribution.

Also affects users with: risk aversion, low computer self-efficacy
After

Now there is an entire section dedicated to documentation contributions with step-by-step instructions.

Learning Style: A process-oriented learner now has the instructions they're looking for in order to easily complete a documentation contribution. This also doesn't stop a tinker from exploring around the project as much as they want.

Providing step-by-step instructions also helps users with: risk aversion, low computer self-efficacy

Evidence: This redesign was validated in a user study (to appear).

Incomplete instructions?Help users keep going; Add instructions for all common situations
Cohesively organized instructions help task-motivated users move forward
Before

Instructions for each OS were in different locations in the project

Motivations: A task-oriented user doesn't explore around to gather up all the necessary instructions. If the instructions they need aren't organized cohesively they may abandon the task.

Also affects users with: low computer self efficacy, risk aversion, process-oriented learning style
After

Added and organized instructions all in one place for all OS setups.

Motivations: This allows task-motivated users to find exactly what they need but allows technology-motivated users to explore as much as they want.

Better organization can also help users with: low computer self efficacy, risk aversion, process-oriented learning style

Evidence: This redesign was validated in a user study (to appear).

Login wall?Help users keep going; Remove unnecessary steps
Removing unfamiliar barriers helps task-oriented users move forward
Before

Users must sign into Canvas to access general information.

Motivations: If a task-oriented user is faced with performing extra steps (especially involving personal information) on the way to their goal; they feel obstructed by these unfamiliar barriers, and will abandon the task.

Also affects users with: risk aversion, process-oriented learning style, low computer self-efficacy
After

Now, users don't have to go through a sign-in page to see a list of common tasks.

Motivations: By removing the sign-in barrier, task-motivated users can freely access general information with performing unfamiliar steps.

Taking down unfamilar barriers can also help users with: risk aversion, process-oriented learning style, low computer self-efficacy
Long list?Help users process it; Add structure
Categorizing long lists helps users find items faster
Before

List isn't categorized enough and there's no structure to the information.

Attitude Toward Risk: A risk averse user wants to clearly locate the publication they are looking for instead of wasting time reading the entire page.

Also affects users with: comprehensive information processing style, task-oriented motivations
After

Organizing the publications by category allows users to see all of the subtopics that can be found on the page.

Attitude Toward Risk: With this solution, a risk averse user can identify the category they're looking for and avoid wasting time reading the full page. This doesn't hinder a risk-tolerant user since they wouldn't have experienced the problem.

Organizing the publications by category also helps users with: comprehensive information processing style, task-oriented motivations
Many options to choose from?Help users decide; Add details
Providing more context helps increase user confidence when making decisions
Before

Title is vague and the lack of a description makes this issue difficult to gauge.

Information Processing Style: A comprehensive newcomer needs enough detail to select an issue that fits their skill level; this further impacts their decision to contribute.

Also affects users with: low computer self efficacy
After

A more detailed title and description were added to provide context for the issue in the project.

Information Processing Style: By providing more information about the issue, a comprehensive newcomer is more inclined to contribute as they can easily decide if it's in their skill level. This solution doesn't hinder a selective newcomer who prefers lists with bolded key words over text blocks.

Providing more context can also help users with: low computer self-efficacy

Evidence: This redesign was validated in a user study (to appear).

Many options to choose from?Help users decide; Add labels
Categorizing issues with color-coded labels helps users avoid spending time on issues that don't fit their skill level
Before

The issue list for this open source project doesn't allow users to easily parse through the issues and confidently select one that fits their skill level.

Attitude Toward Risk: A risk averse user doesn't want to waste time working on an issue that doesn't match their skill level.

Also affects users with: comprehensive information processing style, task-oriented motivations, low computer self-efficacy
After

Categorizing issues by color-coded labels allows users to map the skills needed for each issue.

Attitude Toward Risk: With this solution, a risk averse user can clearly identify the issue that best matches their skillset, and move forward without wasting time. This doesn't hinder a risk-tolerant user since they wouldn't have experienced this pain point.

Categorizing issues by color-coded labels also helps users with: comprehensive information processing style, task-oriented motivations, low computer self-efficacy

Evidence: This redesign was validated in a user study (to appear).

Multi-step task?Help users keep going; Give them a progress bar
Task progress indicators help users manage their time
Before

A user didn't know how far along they were in the process of filling out the survey.

Attitude Toward Risk: Risk averse users have rarely any spare time and would like to know how much of the survey they have left to decide whether or not to continue.

Also affects users with: process-oriented learning style
After

A progress bar is now at the top of the survey to let users know how much of the survey they have left to complete.

Attitude Toward Risk: Risk averse users now are able to track their progress through the survey and know exactly how much is left. It also doesn't hurt risk tolerant users.

Showing user progression through a task also helps users with: process-oriented learning style
Paragraph of instructions?Help users process it; Make it a list
Step-by-step instructions benefit selective information processors
Before

There are no step-by-step instructions or directions to the "issue list".

Information Processing Style: A user with selective information processing style wants to clearly locate the required information without be overwhelmed by extra text.

Also affects users with: task-oriented motivations, low computer self-efficacy
After

Numbered step-by-step instructions were added as well as a direct link to the "issue list".

Information Processing Style: This solution directs users with selective information processing style to a list of instructions instead of a paragraph. The "issue list" is hyperlinked and doesn't require additional navigation. This also doesn't prevent tinkerers from learning through exploration.

Incorporating numbered lists and hyperlinks also help users with: task-oriented motivations, low computer self-efficacy

Evidence: This redesign was validated in a user study (to appear).

Reason to follow link unclear?Help users keep going; Add detailed description
Providing more contextual information helps comprehensive info. processors maked educated decisions
Before

There was no information about what each link lead to and who the personas represent.

Information processing style: A comprehensive information processor needs more information in order to make a decision of how to move forward.

Also affects users with: task-oriented motivations, risk aversion
After

Now there are separate sections for each persona which include a paragraph description and two types of forms to choose from.

Information processing style: A user with a comprehensive information processing style now is given plenty of information in order to make an educated decision. This also doesn't hurt selective information processors since they can just choose one of the persona form options (in blue) rather than read the information before.

Providing more contextual information also helps users with: task-oriented motivations, risk aversion
Reason to follow link unclear?Help users keep going; Add hover-over menu
Hover-over drop-down menus help users avoid wasting time
Before

The tabs provide no additional information about the contents of the page, and forces users to view the page before knowing its contents.

Attitude Toward Risk: A risk averse user wants to clearly locate the tab with the information they are looking for instead of wasting time clicking around.

Also affects users with: task-oriented motivations, comprehensive information processing style
After

Incorporating hover drop-down menus allows users to see all of the sub-topics that can be found on that page.

Attitude Toward Risk: With this solution, a risk averse user knows exactly what information is under each tab and avoids wasting time clicking around. This doens't hinder a risk-tolerant user since they wouldn't have experienced the problem.

Hover drop down menus also help users with: task-oriented motivations, comprehensive information processing style
Reason to follow link unclear?Help users keep going; Add justification
Hints can create clear paths for task-oriented users
Before

This single sentence provides little information of what a user can expect if they click "Contribute.md".

Motivations: A task-oriented user prefers a workflow that doesn't require exploration to complete their task. If they don't see a clear path, they may abandon the task.

Also affects users with: comprehensive information processing style, risk aversion
After

The sentence with the contributing guidelines link now has hints that provides users with more information about what they can find in the 'contribute.md' file.

Motivations: A task-oriented user now knows what to expect if they click on the contributing guidelines link and doesn't need to explore in order to complete their task. Also, this solution allows a technology-motivated user to purposefully explore a piece of software by knowing where potential paths lead.

Adding hints to create a clear path can also help users with: comprehensive information processing style, risk aversion

Evidence: This redesign was validated in a user study (to appear).

Unexplained information?Avoid confusing users; Remove unnecessary information
Removing contradicting information helps increase user confidence
Before

The original table seems contradictory since the "Rank" filter is bolded but the numbers on the right side don't seem to be in order. However, the numbers on the right are actually the number of publications for each university and doesn't affect the rank.

Computer Self-Efficacy: A user with low computer self-efficacy blames themselves for not understanding why the "Rank" filter doesn't match the ordering of the numbers on the right. This would either cause them to spend more time attempting to understand it or abandon the task worried that they did something incorrectly.

Also affects users with: task-oriented motivation, risk aversion, comprehensive information processing style, process-oriented learning style
After

The numbers on the right side of the table were removed.

Computer Self-Efficacy: Now a user with low computer self-efficacy isn't confused by the inconsistency between filters and numbers and can confidently proceed. This solution also doesn't hurt users with high computer self-efficacy.

Removing contradicting information can also help users with: task-oriented motivation, risk aversion, comprehensive information processing style, process-oriented learning style

Evidence: This redesign was created by Vorvoreanu et al. and validated through a user study.

Want to help users collect, compare, and integrate information?Use expandable, pinnable tooltips
Expandable, pinnable tooltips help users get and re-combine info while keeping context
Before

To get help, users have to either leave their context (visit the dictionary) or open a tooltip that disappears once they clicked elsewhere. Users can't compare two definitions side-by-side.

Information Processing Style: Users are only allowed to see a tiny piece of documentation (a transient tooltip) or a huge amount (the dictionary). Comprehensive information processors want the in-between option: All and only the information they need to complete their task.

After

Tooltips stay open and can be moved anywhere on the screen, such as next to other open tooltips.

Information Processing Style: Users who favor a comprehensive information processing style can expand and pin tooltips (like the ‘for’ tooltip shown in the screenshot) so they can learn about and compare programming commands in a convenient way and at any time.

Evidence: A Principled Evaluation for a Principled Idea Garden, Will Jernigan, Amber Horvath, Michael Lee, Margaret Burnett, Taylor Cuilty, Sandeep Kuttal, Anicia Peters, Irwin Kwan, Faezeh Bahmani, Amy Ko, IEEE Symposium on Visual Languages and Human-Centric Computing, October 2015, 235-243.