Usability check and analysis of scenarios for technical development of the eTwinning platform - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

Usability check and analysis of scenarios for technical development of the eTwinning platform

Description:

Usability check and analysis of scenarios for technical development of the eTwinning platform DG EAC Summary of usability recommendations April 2012 – PowerPoint PPT presentation

Number of Views:47
Avg rating:3.0/5.0
Slides: 32
Provided by: aote
Learn more at: http://files.eun.org
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Usability check and analysis of scenarios for technical development of the eTwinning platform


1
Usability check and analysis of scenarios for
technical development of the eTwinning platform
  • DG EAC
  • Summary of usability recommendations
  • April 2012

2
Index
  • Introduction
  • Recommendations regarding current platform
  • Trends to keep in mind
  • Wireframes and design concepts
  • Annexes

3
Introduction Summary 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
Introduction Summary of recommendations
  • This summary is organised as follows
  • Trends
  • Interaction design
  • Education
  • Making it fun
  • Recommendations
  • Home page
  • Interaction design
  • Navigation
  • Logging in
  • Information architecture
  • Readability
  • Flows
  • Registration process
  • Graphic design
  • Quality 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
Index
  • Introduction
  • Recommendations regarding current platform
  • Overview
  • Home page
  • Interaction design
  • Navigation
  • Logging in
  • Information architecture
  • Readability
  • Flows
  • Registration process
  • Graphic design
  • Quality control
  • Wireframes and design concepts
  • Trends to keep in mind
  • Annexes

6
Recommendations Overview
7 steps to improve the overall user experience of
eTwinning
  • The public portal requires a lightening of
    contents some passing to the private area.
  • Visual hierarchies of information need to be
    developed for contents.
  • Interaction design standards should be more
    closely followed and unified across the platform,
    and simplified in the case of TwinSpace.
  • The information architecture of all 3 webs could
    be reworked for easier navigation.
  • The Desktop and TwinSpace should be combined into
    one private area.
  • Contextual tips may help users make the most of
    eTwinning.
  • Each web should have a unique identity, clear at
    a glance.

7
Recommendations Home page
Recommendation
Technical impact
Category
Level
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
8
Recommendations Interaction design
Recommendation
Technical impact
Category
Level
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
9
Recommendations Interaction design (cont.)
Recommendation
Technical impact
Category
Level
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
10
Recommendations Interaction design Navigation
Recommendation
Technical impact
Category
Level
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
11
Recommendations Interaction design Logging in
Recommendation
Technical impact
Category
Level
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 High Single 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
12
Recommendations Information architecture
Recommendation
Technical impact
Category
Level
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
13
Recommendations Information architecture (cont).
Recommendation
Technical impact
Category
Level
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
14
Recommendations Readability
Recommendation
Technical impact
Category
Level
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
  • Recommendations

15
Recommendations Flows
Recommendation
Technical impact
Category
Level
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 Flows
Recommendation
Technical impact
Category
Level
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
  • Recommendations

17
Recommendations Flows Registration process
Recommendation
Technical impact
Category
Level
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
18
Recommendations Graphic design
Recommendation
Technical impact
Category
Level
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
19
Recommendations Quality control
Recommendation
Technical impact
Category
Level
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 boxs 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
20
Recommendations Quality control (cont.)
Recommendation
Technical impact
Category
Level
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
21
Index
  • Introduction
  • Recommendations regarding current platform
  • Trends to keep in mind
  • Interaction design
  • Education
  • Making it fun
  • Wireframes and design concepts
  • Annexes

22
Trends Interaction design
Recommendation
Technical impact
Category
Level
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
23
Trends Education
Recommendation
Technical impact
Category
Level
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
24
Trends Making it fun
Recommendation
Technical impact
Category
Level
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
25
Index
  • Introduction
  • Recommendations regarding current platform
  • Trends to keep in mind
  • Wireframes and design concepts
  • Annexes

26
Recommendations Wireframes and design concepts
Developing the recommendations
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.
Results recommendations
Rough concepts
Look and feel
27
Recommendations Wireframes
eTwinning public home page
eTwinning user logged in view
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.
28
Recommendations Design 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
Recommendations Design 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
Recommendations Design 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
  3. A carousel (top) which provides dynamic content
    to display new features and aid discovery.
  4. eTwinning news relevant to users (middle).
  5. Recent activity in projects and contacts known to
    the user (bottom).
  6. The right hand side includes
  7. The user profile and status is stable and always
    available (top).
  8. New invitations and requests.
  9. Recommendations for possible partners and
    projects to promote activity and make it easy for
    the user to find these options.

31
Thank you
  • End of document
About PowerShow.com