402 Graphic Design for e-Learning Interfaces that Support Learning Adrian Taylor, Enspire Learning June 15-16, 2006 Produced by Advanced Topics in e-Learning Instructional Design Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 Interfaces that Support Learning About What we do •Enspire develops custom learning courseware, simulations, and blended learning programs for a broad range of clients •Since our founding in 2001 we have successfully delivered over 200 projects Our team •50 professionals including instructional designers, script writers, multimedia designers, technologists, and audio and video professionals About me •Developed a wide range of multimedia such as websites, CD-ROMs, e- learning applications, and kiosks for start-ups, software developers, publishers, advertisers, and media groups 2 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 1 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 In this session Discuss the importance of good interface design Review the key principles of good interface design Outline our process and techniques for designing user-centric interfaces Review some demos 3 Why is good interface design so important? The user interface is the gateway through which all content is accessed 4 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 2 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 Successful interface design Is intuitive, making it easy to learn the system and use it Makes it easy for users to perform tasks: •Accurately •Completely Puts the user at ease Respects the user’s time by making tasks efficient 5 Unsuccessful interface design Frustrates users and creates unwarranted anxiety Reduces learner motivation, sometimes to the point of exiting the program Obscures paths to task completion Distracts from learning 6 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 3 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 Cognitive load theory and interface design Three types of memory •Sensory - is used to perceive information (visible/audible) •Working - performs the intellectual activities associated with thinking and processing information •Long-term - stores knowledge and skills Knowledge and skills can be transferred to long-term memory only after they have been processed by working memory Working memory has a limited capacity, so additional processing required by an interface can reduce knowledge transfer and retention Dr. Graham Cooper - December 1998 7 What is a User Interface? A User Interface (UI) consists of the hardware and software elements that allow a user give input or receive feedback Input: •Touch = Mouse, keyboard, capacitive/reactive touch screen, tablet, joystick, trackball, etc. •Speak = Microphone Output •See = Screen •Hear = Speakers 8 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 4 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 What is a Graphical User Interface? A Graphical User Interface (GUI) is an on-screen visualization of controls and data that allows the user to give input and receive feedback Operating System (OS) Software •Word processor •Calculator •Tetris •Web browser •Online application 9 Questions? 10 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 5 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 Top 10 Principles of Good Interface Design The following are not: •All encompassing •Hard-and-fast rules They are: •Guides •Considerations •General best practices 11 1) Consistency Consistency is of paramount concern when it comes to usability Create a set of rules and stick to them •Explain the rules •If your system requires adjustment, make the change consistently •Both visible elements and invisible mapping Create trust •Once users learn the interface they will begin to establish expectations, meet them consistently, and feel at ease •Avoid surprises Don’t force it; if things function differently, don’t try to cram them into the same mold 12 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 6 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 2) Simplicity is a virtue Only include controls, visualized information, and features that will truly support your learner More choices often result in more confusion •But don’t set arbitrary limits! 13 3) Visibility Keep interface elements visually present whenever possible, especially those related to navigation Don’t ask users to create or remember a mental map Make sure that both information and controls related to a certain task are made available concurrently 14 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 7 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 4) Location, location, location Prioritize •Not all elements have equal importance to the user •Make sure that prime real estate and scale are reserved for the right elements Group related elements; separate unrelated ones •Find items faster •Reduce mouse movement Keep the learner’s focus on the content 15 5) Understandability Information and controls should be obvious to the user Reference the user’s knowledge base to impart understanding •Real-world representations •Common web and software conventions 16 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 8 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 6) Create efficiency Identify areas of repetition (frequent tasks) and work to minimize the effort required to perform those tasks Consider what is optimal for the user, not the interface Use simple language and common user terminology Take off the training wheels Avoid downtime 17 7) Feedback Give users confirmation of every interaction they have with the interface Keep user informed about all relevant state-changes If there is a delay caused by loading or processing, make sure the user is made aware 18 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 9 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 8) Safety Protect users from taking potentially damaging action •If an action has a large impact, ask the user for confirmation Complex features may require roll-over explanations Reduce user frustration by: •Providing up-front and/or on-demand training and help options •Providing information within the interface that may answer common questions, reducing the need for help Don’t trap users; always provide a way out 19 9) Flexibility Create systems that allow for different: •User types •Learner types Let users control their experience •Pacing, volume, order, etc. •Bookmaking / resume 20 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 10 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 10) Aesthetics Approachability and the law of the aesthetic interface Be intentional •Things that are misaligned or look like mistakes confuse and distract users •Look and feel will set expectations about function •Color, shape, and size have meaning 21 Questions? 22 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 11 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 Process & Technique Walk through the process we use at Enspire Follow some tangents on technique and best practices 23 Begin with the end-user Good user interface design is about users One size does not fit all At the start of all projects, the team must make themselves knowledgeable about the end-user, the learner Interview actual end-users whenever possible 24 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 12 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 Know thy user Who is the user? •Demographics, job duties, employer’s corporate culture What are their goals? •Accelerate at their job, stop having to ask their kid how to use the computer What are their needs? •Large text for poor eyesight, additional help explanation, resume functionality for frequent interruptions 25 Create Personas Based on your research, develop 2 or 3 mock users (can be more dependent on segmentation in the user-group, project size, etc.) Personas give the end-user a seat at the table Help to answer questions during development when: •Your team has limited access to the end-users •Your development timeline is too rapid to practically get user input •Decisions are limited in scope and it is not prudent to seek input 26 Session 402 – Graphic Design for e-Learning Interfaces that Support Page 13 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006 Technical profile How will the course be delivered (CD-ROM, online, mobile device)? What are the target browsers and operating systems? Is there any other information known about the machines on which the user will be accessing the course (newer/older,