注意

此页面尚未翻译，因此使用英文版本。有兴趣帮忙吗？ 贡献

The following guiding principles are based on various established UI/UX conventions or laws.

• Aesthetics - Not a replacement for good design, but helps compensate for minor flaws. Poor aesthetics can ruin an otherwise well designed functional flow.
  (Aesthetic-Usability Effect)

• Avoid providing multiple ways to achieve the same goal within a singular workbench. Providing alternative methods seems like a benefit to the user but requires the user to process/understand why two methods exist and how they may differ.
  “There should be one– and preferably only one –obvious way to do it.”
  (The Zen of Python)

• When implementing functionality which is common within other workbenches, a developer should make every effort to ensure behavior of those functions remains consistent with pre-existing implementations.

• Attempt to make user interactions and software responses as fluid and quick as possible. Ideally below 400ms.
  (Doherty threshold)

• Avoid making interactive elements too small. The size of elements should be large enough to prevent a majority of ‘miss-clicks’.
  (Fitts’s Law)

• Travel distance between functions and related interactive elements should be minimized to reduce incidence of errors.
  (Fitts’s Law)

• Only expose the most common/likely settings or options a user may need by default. Advanced, or infrequently used controls should be hidden but readily accessible. This minimizes time required to make choices and increases efficiency.
  (Hick-Hyman Law)

• Minimize superfluous options in exchange for broadly effective defaults. Advanced preferences shall be accessible via the parameter editor instead of the preferences dialog.
  (Hick-Hyman Law)

• When implementing features or functions which are commonly found in other software, one should consider the method by which they function. Deviations from ‘reasonably expected behavior’ shall be clearly justified.
  (Jakob’s Law)

• Behavior and element use across an application must remain consistent. Deviations shall be clearly justified.
  (Jakob’s Law)

• Ensure functions and options are grouped logically and not dispersed randomly.
  (Law of Common Region)

• Proper organization of like functionality in close proximity together help users understand and organize information better.
  Related elements/functions should share similar visual symbology
  (Law of Proximity / Law of Uniform Connectedness)

Understand that UI/UX is closely linked to human psychology and tendencies

Aesthetic-Usability Effect

• An aesthetically pleasing design nets a positive response about usability and makes the UI design appear better even in the absence of any other differences.

  • This is a low-hanging fruit for FreeCAD’s GUI as the default themes presented can be carefully curated for a visually pleasing effect.

• Visually pleasing design masks usability problems and keeps problems from being discovered.

  • While this is a benefit when considering the end-user, it can also pose a problem when seeking feedback from users about problems and proposed solutions.

  • Testing UX design improvements a simplified and bland theme/stylesheet should be used.

• People are more tolerant of usability issues when the design aesthetic is appealing

• “During usability testing, one user encountered many issues while shopping on the FitBit site, ranging from minor annoyances in the interaction design to serious flaws in the navigation. She was able to complete her task, but with difficulty. However, in a post-task questionnaire, she rated the site very highly in ease of use. “It’s the colors they used,” she said. “Looks like the ocean, it’s calm. Very good photographs.” The positive emotional response caused by the aesthetic appeal of the site helped mask its usability issues.”
  (The Aesthetic-Usability Effect)

• Takeaway: Aesthetically pleasing interfaces are worth the investment. Visual designs that appeal to your users have the side effects of making your site appear orderly, well designed, and professional. Users are more likely to want to try a visually appealing site, and they’re more patient with minor issues.

Doherty Threshold

• Summarized as user interactions and software response time hits a psychological ‘addictive’ state when response is roughly 400ms or slightly less.

• In the case of FreeCAD, appears to be less relevant, and is incredibly difficult to quantify.

Fitt’s Law

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

  • The bigger the distance to the target, the longer it will take for the pointer to move to it. In other words, closer targets are faster to acquire.

  • The larger the target, the shorter the movement time to it. In other words, bigger targets are better.

• Complements the concepts of the “Two Component Model”

  • Initial movement fast, imprecise

  • Final movement slower for precision

• Takeaways

  • Size matters, interactive/clickable elements should be large enough to reduce errors/miss-clicks.

  • Minimizing travel distance to relevant targets also reduces the incidence of errors.

Goal-Gradient Effect

• This effect implies that giving users a sense of progress through visual indicators increases productivity.

• Seems to apply to linear task type applications and is not likely to be applicable to most work done in CAD.

Hick-Hyman Law

• Hick’s Law is a simple idea that says that the more choices you present your users with, the longer it will take them to reach a decision. It’s common sense, but often neglected in the rush to cram too much functionality into a site or application.

• “The time it takes to make a decision increases with the number and complexity of choices.”

• Minimize choices to decrease and simplify decision making and increase efficiency

• Reducing displayed options increases efficiency and keeps users engaged in their task.

• Avoid Overwhelming Users by highlighting recommended options

• Be careful not to simplify to the point of abstraction

• Takeaway: K.I.S.S. - Keep it Simple, Stupid

Jakob’s Law

• Effectively states users spend most of their time using other software (or websites/web apps) This means that users prefer to work within established conventions that they are already used to.

• Closely related to “The Power Law of Learning”

  • Repetition and consistency improve and reduce learning curves

• Takeaways:

  • Common functions found in most other software should work generally the same way new users can reasonably expect based on preexisting experiences.

  • Consistency in behavior and element location is paramount to good UI/UX design

  • When making major changes, minimize discontent by empowering users to continue using a familiar version for a limited time.

Law of Common Region

• UI elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary

• Humans naturally perceive objects as organized patterns.

• Gestalt laws organize based on the following categories:

  • Proximity

  • Similarity

  • Continuity

  • Closure

  • Connectedness

Law of Proximity

• Proximity helps to establish a relationship with nearby objects.

• Elements in close proximity are perceived to share similar functionality or traits.

• Proximity helps users understand and organize information faster and more efficiently.

Law of Pragnanz

• The human eye likes to find simplicity and order in complex shapes because it prevents us from becoming overwhelmed with information.

• Research confirms that people are better able to visually process and remember simple figures than complex figures.

• The human eye simplifies complex shapes by transforming them into a single, unified shape.

• Takeaway: Icons should be reviewed with this principle in mind.

Law of Similarity

• Elements that are visually similar will be perceived as related

• Color, shape, size, orientation and movement can signal that elements belong to the same group and likely share a common meaning or functionality.

• Ensure that links and navigation systems are visually differentiated from normal text elements.

Law of Uniform Connectedness

• Elements that are visually connected are perceived as more related than elements with no connection

  • Group functions of a similar nature so they are visually connected via colors, lines, frames or other shapes.

  • Use uniform connectedness to show context or to emphasize the relationship between similar items.

  • Use tangible connecting reference (line, arrow, etc) from one element to the next to also create a visual connection

Miller’s Law

• The average person can only keep 7 (+/- 2) items in their working memory

• Takeaways

  • Don’t impose unnecessary design limitations just for the sake of hitting ‘7’

  • Organize content into smaller chunks to help users process, understand and memorize more easily.

  • Short Term memory capacity will vary per individual based on prior knowledge and contextual understanding

Occam’s Razor

• Among competing hypothesis that predict equally well, the one with the fewest assumptions should be selected

• Takeaways:

  • The best method for reducing complexity is to avoid it in the first place

  • Consider completion only when no additional items can be removed

  • Analyze each element and remove as many as possible, without compromising the overall function

Pareto Principle

• For many events, roughly 80% of the effects from 20% of the causes.

• Takeaways:

  • Inputs and outputs are commonly not distributed evenly

  • A large group may contain only a few meaningful contributors to the desired outcome

  • Focus the majority of effort on the areas that will be the largest benefits to the most users.

Parkinson’s Law

• Any task will inflate until all of the available time is spent

• Takeaways:

  • Limit the time it takes to complete a task to what users could reasonably expect it will take.

  • Reducing the actual duration to complete a task from the expected duration will improve the overall user experience

  • Leveraging types of features such as autofill to save the user time allows for quick completion of tasks

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.

• Takeaways:

  • Pay attention to the most intense points and final moments of the user ‘journey’

  • Identify the moments when your product is the most helpful, valuable or entertaining and design to delight the end user.

  • Remember that users recall negative experiences more vividly than positive ones

Additional Resources:

Laws of UX

Nielsen Norman Group

10 Jakob Nielsen’s UI heuristics