usability check and analysis of scenarios for technical development of the etwinning platform dg eac...

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



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


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


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.)


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


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


12

Structure:Sections with large quantities of information would benefit from landing pages.


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.


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


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).


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


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


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).


Front Medium


17

RecommendationsFlows: Registration process

Capture potential users:Enable users a “sneak peak” without registering a school and other flexible sign ups.


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


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


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


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


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


RecommendationsQuality control (cont.)


21

1. Introduction


3. Trends to keep in mind1. Interaction design

2. Education

3. Making it fun


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


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


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


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


25

1. Introduction




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


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


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

usability check and analysis of scenarios for technical development of the etwinning platform dg eac...

Documents