Usability check and analysis of scenarios for technical development of the eTwinning platform
DG EAC
Summary of usability recommendationsApril 2012
2
1. Introduction
2. Recommendations regarding current platform
3. Trends to keep in mind
4. Wireframes and design concepts
5. Annexes
Index
3
IntroductionSummary of recommendations
A summary follows of the
recommendations which resulted from the
heuristic evaluation, user survey and
usability tests carried out between January
and March 2012.
An indication of the technological impact
these recommendations could have is
included.
The aim of this study was to identify
improvement opportunities in usability
and user experience of the eTwinning
platform.
4
IntroductionSummary of recommendations
This summary is organised as follows:
TrendsInteraction designEducation Making it fun
RecommendationsHome pageInteraction design
o Navigationo Logging in
Information architectureReadabilityFlows
o Registration processGraphic designQuality control
The category the recommendation falls into (e.g. contents, design, database, CSS etc), the level
(front or back end) and the technical impact (low, medium or high) are also included.
5
1. Introduction
2. Recommendations regarding current platform1. Overview
2. Home page
3. Interaction design• Navigation• Logging in
4. Information architecture
5. Readability
6. Flows• Registration process
7. Graphic design
8. Quality control
3. Wireframes and design concepts
4. Trends to keep in mind
5. Annexes
Index
6
1. The public portal requires a lightening of contents; some passing to the private area.
2. Visual hierarchies of information need to be developed for contents.
3. Interaction design standards should be more closely followed and unified across the platform, and simplified in the case of TwinSpace.
4. The information architecture of all 3 webs could be reworked for easier navigation.
5. The Desktop and TwinSpace should be combined into one private area.
6. Contextual tips may help users make the most of eTwinning.
7. Each web should have a unique identity, clear at a glance.
RecommendationsOverview
7 steps to improve the overall user experience of eTwinning:
7
Key messages:Ensure key messages (identity, value proposition, purpose and reach of site and intended public) are conveyed. This can be tested with users.
Content strategy
Front Low
Images: Ensure the use of images reflects the identity of the target user.
Content strategy / Design
Front Low
Reduce and reorganise:Home page contents to improve message impact.
Information architecture
Front Low
Guide new users:A “getting started” video may help to motivate and give basic feature orientation to potential users.
Content strategy
Front Low
RecommendationsHome page
Recommendation Technical impactCategory Level
8
Visual feedback:When a user creates a new page, take the user to this page (e.g. in TwinSpace).
Interaction design
Front and backend
Medium
Visibility:Show forums and related activities already created by default; it is easier to delete than to add (TwinSpace).
Interaction design / Usability
Front and backend
Medium
Tabs: Follow visual and interaction standards i.e. clicking should show the contents of that tab without changing pages. (e.g. TwinSpace).
Interaction design
Front and backend
Medium
Language selection options:•Should be permanently available.•Should be consistently located throughout.•Should recognise IP or previously selected choices.
• Interaction design
• Info. Architecture
Front end Low
One experience:The integration of the three main sections would smooth out the user experience and interaction inconsistencies.
Information architecture and tech. arch.
Front and backend
High
RecommendationsInteraction design
Recommendation Technical impactCategory Level
9
Notifications: •Clearly display important notifications, list the new notifications on the home so that the user comes across them easily. e.g. for project requests, status contact notifications.
•Automatically archive a notification when users have noticed it and/or incorporate the delete function into the list.
Design Front and backend
Low
Adding interactive tools:•Provide an easy and basic way to add a tool, for example: show buttons that allow tools to be added.•Change the word "application" in order that it is more closely related to the collaboration context, for example: “Tool” or “Collaboration tool” (TwinSpace).
Interaction design
Information architecture
Front and backend
Medium
Standard behaviour:•Expand and minmise (e.g. modules of TwinSpace) should follow standard interaction.
Interaction design
Front and backend
Low
RecommendationsInteraction design (cont.)
Recommendation Technical impactCategory Level
10
Standards:Followed standards in regards to navigation
•e.g. the small “home” icon can support clicking on the eTwinning logo, but should not replace it all together.
•Including the menu option “Home” is an alternative solution.
•Modify interaction of the main menu – addition of landing pages and clearer, more responsive interaction design
Interaction design
Front Low
Orientation:Ensure the current page selection is highlighted in the menu to orient users.
CSS Front Low
Direct routes:Provide direct access to the TwinSpace from a Project.
Interaction design
Front Low
RecommendationsInteraction design: Navigation
Recommendation Technical impactCategory Level
11
Standards:Use a standard log in / sign up box to reduce the learning curve and ease navigation between the different sections. •The asterisks in the password field should automatically be deleted when the user clicks in the log in box. •Log in and user profile information should be consistent throughout the platform and not require logging in for different sections.•Contrast should be checked for accessibility.
Interaction design
Front and back HighSingle Sign On (CAS) needs to be worked on to improve performance.
Visual Feedback:When the user logs in, there should be clear feedback, such as a change in page contents (e.g. change from public home to desktop).
Interaction design
Front Medium
RecommendationsInteraction design: Logging in
Recommendation Technical impactCategory Level
12
Structure:Sections with large quantities of information would benefit from landing pages.
Information architecture
Front Low
Unify related concepts:Review contents and options and unify where appropriate. E.g. merge “groups” with “teachers’ rooms”, even if this requires giving them a special name or treatment.
Contents Front Low
Menu labels: Review menu option labels, preferably involving users for validation, to optimise descriptions.
Information architecture
Front Low
Clear objectives:Explain clearly that the objective is for teachers to seek project partners in Europe, not only from their same country.
Contents Front Low
Information hierarchy:Give key features greater prominence. This applies to all pages, especially the home, personal home and collaborative space.
Usability / information architecture
Front Low
RecommendationsInformation architecture
Recommendation Technical impactCategory Level
13
Learning curve compensation:Ensure the page design is optimised for less advanced internet users. E.g. instructions, tips, highlighted options, intuitive and simple discovery.
Usability Front Medium
Supporting texts: It would be useful to include an Activity overview to help participants understand its purpose and context. The same applies to the list of TwinSpaces.
Content strategy
Front Low
Instructions: include concise guidance on difficult steps such as creating an activity.It is worth testing instructions with users.
Contents Front Low
Contextualise:Activities and member status and management options should be contextualised for easy usage.
Design Front Low
RecommendationsInformation architecture (cont).
Recommendation Technical impactCategory Level
14
Recommendations:
RecommendationsReadability
Presentation:Present information in highlighted boxes with relevant content supported by images and/or icons.
Design Front Low
Writing for the web:Highlight sub-titles or use coloured visual hierarchy, use bullets and short paragraphs as well as other media.
Presentation / CSS
Front Low
Gestalt design:Re-order lists vertically to aid scanning.
Design Front Low
Recommendation Technical impactCategory Level
15
RecommendationsFlows
Inform:Explain what the next steps, requirements, permissions and procedures are in concise terms.
Contents and persuability
Front Low
Progress trackers:Give total control to the user during stepped processes: •Follow progress tracker standards.•Allow users to go back or cancel the process.•Use a single design throughout.
Graphic design and interaction design
Front Medium
Form aids: •Combos or autosuggest fields can be used for towns and cities to avoid database duplication. •Display options according to any previously defined languages (“intelligent defaults”).
Interaction design and form completion
Front end and database
Medium
Confirmation, error and error prevention messages:•Must be clear and informative.•In close proximity to the subject and context.
Usability and design
Front Low
Recommendation Technical impactCategory Level
16
Recommendations:
RecommendationsFlows
Conventions and best practices: help reduce the learning curve and remove barriers (e.g. to create a project).
•Add contextual help and tips to forms and steps (e.g. what is a kit?).
•Keep forms as short as possible.
•Look at adaptive interfaces for getting projects started for example.
•Divide processes into manageable steps.
•Allow users to get started a.s.a.p. and complete secondary information later.
Interaction design and engagement
Front Medium
One flow at a time:Creating an activity should be a separate flow to managing one (e.g. activities on the TwinSpace).
Interaction design and engagement
Front Medium
Recommendation Technical impactCategory Level
17
RecommendationsFlows: Registration process
Capture potential users:Enable users a “sneak peak” without registering a school and other flexible sign ups.
Interaction design and engagement
Front and back Medium
Avoid database duplication:Change free entry fields to combos or autosuggest fields (e.g. city, town).
Interaction design and form completion
Front and back Medium
Clarity:Inform about the next steps, requirements and procedures in concise terms to avoid fear. Especially as the sign up requires validation; an uncommon step for many users.
Usability and engagement
Contents Low
Recommendation Technical impactCategory Level
18
Buttons: Follow best practices, e.g. •Use the same alignment throughout.•Look and feel: ensure it is consistent and clearly shows differentiation from other page elements such as tabs or headers.•Use descriptive natural language, e.g. “Continue”, “Save”.
Design Front Low
Tables e.g. project and contact lists.Ensure good readability: •Giving table headers adequate visibility. •Keeping row actions to a minimum; making the most important stand out.•Follow table standards
Design / CSS Front Low
Visual hierarchy:Ensure important or frequent options are clearly visible e.g. Activites page listing, project management options, TwinSpace on the Desktop
Usability Front Medium
EU Style:Maintaining a separate graphic style from the official EU design.
Design Front Low
RecommendationsGraphic design
Recommendation Technical impactCategory Level
19
Language consistency: •The Spanish version of the site mixes “tú” with “usted”. A review is recommended. Note: This issue may not be limited to the Spanish version.•Instructions referring to certain features or pages should use the same terms as said features or pages. E.g. Activity module of TwinSpace.
Contents Contents Low
Search: •Improve the “Search” box’s size and location for greater visibility. •Its success at finding results could be improved for greater UX.•The partner search could be simplified and optimised with just 3 or 4 fields.•The user should be able to edit the search query from the results page.•Ensure related options are visually contextualised (e.g. Find eTwinners forum search)
Design
Metadata
Usability
Front-end design
High
RecommendationsQuality control
Recommendation Technical impactCategory Level
20
Accessibility: It would be advisable to ensure contrast and text size is always adequate for a broad audience.
Design / CSS Front Low
Bugs: Check and stabilise the activity module of the TwinSpace.
Performance Front and back Medium
Resources: File upload could be automated for greater user satisfaction and ease.
Technical tools
Front and back Medium
RecommendationsQuality control (cont.)
Recommendation Technical impactCategory Level
21
1. Introduction
2. Recommendations regarding current platform
3. Trends to keep in mind1. Interaction design
2. Education
3. Making it fun
4. Wireframes and design concepts
5. Annexes
Index
22
Flexible account creation: Users glimpse the contents without having to register or complete a lot of fields.
Interaction design
Database, user profiles
Low
Adaptive interfaces for personalized experiences: the interface helps the user to grow by making appropriate and timely suggestions as the user explores or works. This enables users to get the most out of a website or application.
Persuability, content strategy
Front and back Medium
Micro-blogging: Tell your peers what you are up to.
New tool Front and back Medium
Personalized recommendations: Teachers could receive contextual recommendations for appropriate partners, kits, and teachers’ rooms or groups according to their profile information.
New feature Back end / database, front end design
Medium
Go social: An opportunity to include social widgets and encourage more user created content beyond RSS.
New features Front and back Medium
TrendsInteraction design
Recommendation Technical impactCategory Level
23
Tablets and mobiles: Students are starting to use tablets instead of exercise books. This has implications for the type of optimal design interaction.
Interaction design
Database, user profiles
Medium
User-led learning: In this case, a more bottom-up approach could enable older students to have more input into the activities conducted rather than a unidirectional teacher-led scheme.
Contents Front and back Medium
Live conversations: an important part of language learning is practice. This could be solved using telemeeting and/or screen sharing tools.
New tool Front and back High
Video: learning with visual aids and letting users create and upload them.
New feature Multimedia dev, front and back
High
Real time design: users view, annotate and add to a drawing or schema in real time using virtual whiteboard-type technology.
New tool Front and back High
TrendsEducation
Recommendation Technical impactCategory Level
24
Gamification: learn and participate through play. This can be both teachers learning to use the platform as much as students interacting with each other.
Contents Front and back High
Rewards and competition: motivate students through rewards for participation. Collecting points or medals is familiar to children and young people from computer games.
Engagement Front and back High
Ratings: allow users can rate the posts or other contents they like most. This motivates users to create better contents and “compete” against each other.
New tool Front and back Medium
TrendsMaking it fun
Recommendation Technical impactCategory Level
25
1. Introduction
2. Recommendations regarding current platform
3. Trends to keep in mind
4. Wireframes and design concepts
5. Annexes
Index
26
RecommendationsWireframes and design concepts
The core recommendations which can greatly improve the user experience of eTwinning have been outlined in low-fidelity interactive prototypes of a select few pages and interactions found to need optimising in the usability tests.
Graphic design concepts of the public home page and the logged in home page have also been developed to offer an alternative look and feel concept.
Developing the recommendations
Results + recommendations Rough concepts Look and feel
27
RecommendationsWireframes
eTwinning public home page
Wireframes are basic prototypes to develop page layout and interactions. These are used in a very early stage of a redesign. Final details are not shown at this stage.
eTwinning “user logged in” view
28
RecommendationsDesign concepts
eTwinning public home page eTwinning “user logged in” view
Many of the recommendations are captured in the design concepts displayed above.
They offer a radical alternative to the current design in order to develop ideas and opinions.
29
RecommendationsDesign concepts
eTwinning public home page: characteristics
1. Lightweight header takes little space but
clear branding.
2. Language selection always available.
3. Search box located in standard location.
4. Strong, descriptive tagline.
5. Demo to inform new visitors.
6. Strong calls to action: log in and sign up
located together.
7. 3 simple, focused blocks: Features, Project
showcase, eTwinning news for key
contents.
30
RecommendationsDesign concepts
eTwinning “user logged in” view: characteristics
1. When the user logs in, she is presented with information relevant to her, her profile and projects. This is the control panel for the user, unified in one place.
2. The centre of the page is used for:1. A carousel (top) which provides dynamic content
to display new features and aid discovery.2. eTwinning news relevant to users (middle).3. Recent activity in projects and contacts known to
the user (bottom).
3. The right hand side includes:1. The user profile and status is stable and always
available (top).2. New invitations and requests.3. Recommendations for possible partners and
projects to promote activity and make it easy for the user to find these options.
31
Thank youEnd of document