4214.2 Balsamiq (UI / UX)

User Interface (UI) and User Experience (UX)

User interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centered design).

Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface.[1] The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs.

Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered on their expertise, whether that be software design, user research, web design, or industrial design (wikipedia).

Watch this lynda video. https://www.lynda.com/User-Experience-tutorials/UX-Research-Fundamentals/439418-2.html?org=gcsu.edu

Watch this lynda video. https://www.lynda.com/Higher-Education-tutorials/Universal-Principles-Design/193717-2.html?org=gcsu.edu

Interface Elements

  • Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
  • Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
  • Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
  • Containers: accordion

Best Practices

  1. Keep the interface simple – avoid unnecessary elements.
  2. Create consistency and use common elements. Create patterns in language and layout.
  3. Be purposeful in your layout.
  4. Strategically use color and texture. Focus on contrast and color.
  5. Use typology to create hierarchy and clarity. This includes type face and size.

CRAP

Contrast – http://usabilitypost.com/2008/08/14/using-light-color-and-contrast-effectively-in-ui-design/

Repetition – https://www.interaction-design.org/literature/article/repetition-pattern-and-rhythm

Alignment – left alignment is the strongest.

Proximity – putting like items near each other.

 

Resources

http://blog.teamtreehouse.com/10-user-interface-design-fundamentals

https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html

http://www.goodui.org/

 


Balsamiq

Watch this lynda vide. https://www.lynda.com/Balsamiq-Mockups-tutorials/UX-Design-Tools-Balsamiq-Mockups/172857-2.html?org=gcsu.edu

 

Other Resources

https://support.balsamiq.com/desktop/classroom

https://mockupstogo.mybalsamiq.com/projects

Written by