User Interface (UI) vs. User Experience (UX)

 

          There are many metaphors that can be used to introduce user interface and user experience. One of the most useful metaphors (especially with us being in Southern California) is that the user experience is the art of a surfboard gliding through water effortlessly. Meanwhile, in the same metaphor, the user interface could be the shape of the board that makes it ride the wave (Miller, 2012). For another fun metaphor regarding UI and UX, check out this graphical explanation using breakfast cereal. 

 

Instructional Design Considerations for UI and UX

 

          In general, there are three categories of user interfaces: small screens (smartphones/tablets), desktop screens and large screens (TVs or other displays). Whether the instructional design elements are included in a website or software, the design of the user interface is always critical to the success of the project.

          With each passing year, the number of computer devices available continues to grow. The way we access and use these devices can vary drastically from person to person. As the number of interfaces and the diversity of users grow, the need for effective interface design increases (Blair-Early, 2008).

 

In a quick nostalgic look back into the mid-1990s, Figure 1 features an outdated user interface from that time to see how far we've come:

 

Figure 1

 

 

          A worthwhile learning experience typically is paired with instructional design that has aesthetic qualities (Parrish, 2009). Many different principles and influences exist, so it’s important for instructional designers to match aesthetic strategy with existing instructional design theory.

          Creating the user interface is a task that should be completed with care. Designing the instructional interface is a difficult assignment and through the process, there is a lot of different knowledge that is required. Instructional and visual design, psychology, human-factors, ergonomic research, computer science and editorial design are all aspects to be considered (Lohr, 2000).

          During development of the interface, it’s important that the learning goals are not compromised by the aesthetics or technical needs. All three factors are crucial and a balance should be achieved.

          In creating the user interface and experience, there can often be a trade-off between fidelity and convenience. For more on achieving that balance, access the later portion of the YouTube clip below. It’s the 2014 opening address at iDesignX by the Keynote Speaker, Tom Kuhlmann (VP Articulate Community):

 

 

As found in the 2008 article by Blair-Early, several important interface design principles include:

 

1.   Design an Obvious Starting Point

    •     A user should understand how to begin interaction with the content

    •     A start point is needed because each encounter with a new interface is a separate learning process.

 

2.   Design an Easy Method for Users to Exit

     •     The user must know how to reverse any action, such as how to exit or end the session.

     •     Knowing an exit route may provide the user with the necessary confidence to sustain an interactive session.

 

3.   Implement Consistent Logic for Content, Actions and Effects

     •     To reinforce a pattern, a user must be able to depend on a reasonable level of consistency.

     •     Consistency reinforces learning and keeps the learning curve brief.

 

4.   Identify and Consider the Impact of Standard Interface Conventions

     •     Each user has a standard expectation for the language of words, phrases and images.

     •     Existing conventions should only be violated with care and only violated when it provides an advantage or avoids a problem.

 

5.   Include Feedback to User Actions

     •     As they complete assignments, users should receive feedback that is as immediate as possible.

 

6.   Design Reference Points

     •     In order to understand their location in the space of the interface, it’s important to provide information that serves as a reference point or landmark.

 

7.   Design Elements in a Logical Proximity to Their Content Objects

     •     When featuring similar actions or related content, it’s important that the user doesn’t have to travel a large distance in the conceptual space of the interface.

 

8.   Design an Interface that is Adaptable

     •     Customization within the interface allows users of many different levels (beginner, intermediate, advanced) to benefit from the learning.

 

9.   Provide an Option for Users to Receive Help

     •     Make a support option available but make it subtle so that users don’t rely on it as a crutch.

 

10. Design Elements that Maximize Content while Minimizing Interface

     •     Remember that the interface serves the content, it’s not the content that serves the interface.

 

 

Figure 2

 

Does this learning slide follow some of the principles mentioned above?

 

 

          It doesn’t seem to have a clearly obvious starting point but it does offer a chance at help, along with reference points and maximized content without an overload.

          While Blair-Early’s design principles give general guidelines for interface design, different websites and learning modules embrace different design strategies (2008). Facebook provides an excellent example of interface design principles not mentioned by Blair-Early (Facebook, 2009), and while not an educational website, several of their principles could be applied to educational interface designs.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Universal. Our mission is to make the entire world more open, and this means reaching every corner, every person. So our design needs to work for everyone, every culture, every language, every device, every stage of life. This is why we build products that work for 90% of users and cut away features that only work for just a minority, even if we step back in the short term.

Clean. Our visual style is clean and understated, to create a blank canvas on which our users live. A minimal, well-lit space encourages participation and honest transparent communication. Clean is the not the easiest approach to visual style. To the contrary, margins and type scale, washes and color become more important as we reduce the number of styles we rely on.

Consistent. We invest our time wisely, by embracing patterns, recognizing that our usability is greatly improved when similar parts are expressed in similar ways. Our interactions speak to users with a single voice, building trust. Reduce, reuse, don’t redesign.

Fast. We value our users time more than our own. We recognize faster experiences are more efficient and feel more effortless. As such, site performance is something our users should never notice. Our site should move as fast as we do.

 

          While these are not strictly applicable to instructional design, they can easily be applied to an educational website and the benefits would apply similarly. User experience can be meaningful if it combines a carefully-developed user interface that contains a worthwhile interaction with the instructional materials.

 

 Although a bit lengthy, a useful presentation on user experience can be found embedded below. Julie Dirkson delivered this presentation at the ATD International Conference and Exposition:

 

 

 

 

References:

 

Blair-Early, A., & Zender, M. (2008). User interface design principles for interaction design. Design Issues, 24(3), 85–107.

 

Facebook (2009, July 1). Facebook design principles. Retrieved April 19, 2015, from https://www.facebook.com/note.php?note_id=118951047792

 

Facing 21st century instructional design challenges. (2014). Retrieved from https://www.youtube.com/watch?v=hOxJCtENRsk&feature=youtube_gdata_player

 

How to create a visual hierarchy. (n.d.). Retrieved April 16, 2015, from http://theelearningcoach.com/media/graphics/how-to-create-a-visual-hierarchy/

 

Lohr, L. L. (2000). Designing the instructional interface. Computers in Human Behavior, 16(2), 161–182. http://doi.org/10.1016/S0747-5632(99)00057-6

 

Parrish, P. E. (2009). Aesthetic principles for instructional design. Educational Technology Research and Development, 57(4), 511–528.