Enhancement of the graphical user interface of. WAYF - Where Are You From

Size: px

Start display at page:

Download "Enhancement of the graphical user interface of. WAYF - Where Are You From"

Kathleen Osborne
6 years ago
Views:

1 Enhancement of the graphical user interface of WAYF - Where Are You From In collaboration with the Competence Center Human-Computer Interaction at Fraunhofer Institute for Industrial Engineering IAO, Stuttgart, Germany April 26, 2010 By David Simonsen and Jacob-Steen Madsen 1 / 15!

2 Introduction! 3 Usability design principles! 4 Usability principles, tips for requirement specification! 5 Usability tests! 6 Improving usability of the WAYF federation! 7 Login functions at the service, recommendations! 7 The Where-are-you-from (WAYF) service, present layout! 8 The Where-are-you-from (WAYF) service, new layout! 9 Authentication web pages, usability recommendations! 12 Consent to data exchange of personal data, present layout! 13 Consent to data exchange of personal data, new layout! 14 Further considerations! 15 Recommended reading! 15 Special thanks to Andreas Schuller, Janina Bierkandt and Fabian Hermann at the Competence Center-Human Computer Interaction at Fraunhofer Institute for Industrial Engineering IAO, Stuttgart, Germany 2 / 15!

3 Introduction E-id federations change the way users interact with web based services. As the federated model is still in it's infancy and many of the existing solutions have been designed on a best-effort basis by non-experts, it is important to focus on how user interaction may be improved in order to support the further uptake of the federated model. Today, users either have a user name and password for each service, or are let in based on the IP address their machine is provided with. The federated model (Fig. 1), where access control is based on claims about the user (student, staff, home institution name etc.) requires the service providers and the users' home institutions to interact in new ways with the users when performing the following tasks: Fig. 1 Services X WAYF?! Institutions 1 login 1. Let the user login at the service (presentation of login options) 2. Choose home institution (where to login, the 'where-are-you-from' service) 3. Login-screen (user authentication) 4. Users' consent to data exchange (presentation of data and decision on data exchange) 5. Access control (decision on wether or not to let the user in, presentation of decision) Services Institutions Fig. 2 X Consent WAYF Y 2 login Consent administration 1 login The present study is based on WAYF's hub-and-spoke architecture (Fig. 2), which differs in many respects to deployments of i.e. Shibboleth based e-id federations. Still, as many of the basic concepts of all e-id federations are the same, we believe also many of the usability issues will be the same. The study was performed by experts from Fraunhofers' Competence Center Human- Computer Interaction in Stuttgart, in November 2009, in collaboration with the WAYF federation. 3 / 15!

4 At the time of writing the presented enhancements are being implemented. Some of the figures below are hence conceptual mock-ups, not screenshots of the running system. The following sections describe superficially some of the principles and methods used by usability experts and are by no means ment to be an exhaustive or in any way complete list of the many approaches that might be chosen when dealing with usability of graphical interfaces. This report is the result of a two-days workshop with the human-computer interaction group at the Fraunhofer Institute in Stuttgart, held in November The workshop first focussed on the general concepts of federated identity management and access control. Also various architectures, legal aspects and solutions were discussed. Then a thorough examination of the current system and layout of WAYF's user interface followed, along with various suggestions and discussions of how to qualitatively enhance the user interface, covering all steps in the process of federated login and variations hereof. Usability design principles The Human-computer interaction community has established design priciples i.e. the golden rules of Donald Norman, ISO 9241 etc. One such example are the rules below, taken from the author of 'Human-computer Interaction design: foundations' Ben Schneidermann who goes into depth with the following basic design principles: Consistency, the overall graphical design, placement of elements should be recognizable throughout the system Shortcuts, quick or slow (easier) navigation across functional domains should available Feedback, clear indication of perception/reception of actions performed, i.e.. clicked buttons Yield closure, indication of how much is left or what needs to be done in order to end a task or workflow Error prevention and simple error handling, prevent any presentation of errors to the user, if unavoidable, keep number of available actions minimal and understandable Locus control, give users the feeling of control (e.g. usage speed) Reduce short term memory load, do not expect the user to remember what was presented just before, present needed information and available actions for each subtask. 4 / 15!

5 Usability principles, tips for requirement specification Start by listing the functional requirements that seem obvious to you self. Prioritize the requirements according to your own understanding of the problem space. Also investigate the users' requirements and make them prioritize the list. The final requirement specification should be a combined list of yours and the users needs. Mental models of system interaction with well know systems might be useful as inspiration for the requirement specification. Build on well know metaphors and established patterns and generally accepted feedback mechanisms. One example is the build-in red lamps in induction based heating plates - which never turn warm. The red light is only there to indicate 'hot area' or 'it's working' even though the red light has no technical relation the heating effect what so ever. It's a signal and thereby a part of the user interface. Placement of menus should be considered with regard to the functional context of the interface. Menus should be placed on the left hand side, as this tends to let the user more easily focus on text and content. Personas are imaginary persons created based on your own understanding of what the person might be like. The initial description should be as detailed as possible: social context, age, gender, interests, photo etc. Then the preliminary persona should be presented to a user group representing the persona in order for add further details. The study might be complemented with studies of people in the target group. Finally one or more interviews with real users should be conducted. Impression management might be worth considering as factor influencing the way users behave, as users might want to appear to others in a certain light depending on the context. One example could be that users might want to look more 'business-like' in photos related to their work than in photos related to their family. This 'impression management' might also affect the users' written language etc. It should therefore be considered if the user interface 'fits' the correct style/form/level of confidence wanted by all involved in the interaction (service provider, user, others). Prototyping is highly recommended - the sooner in the process, the better. Prototypes might come in the form of rough drawings of the graphical layout, power point slides, detailed suggestions etc. The rule of thumb is that any hands-on-item is easier to relate to for potential users and will serve as a vehicle of quick user response to ideas and suggestions of changes to user interfaces. The wizard-of-oz-test lets a user perform tasks that have not yet been functionally implemented but only visible as graphical representations. The user is not aware that the system is not working yet, i.e. that someone else is controlling the program or choosing the proper slide of the presentation. This might give insight into how well i.e. placement of buttons, text fields etc. work. Wire frames are simple, conceptual suggestions for layouts of graphical suggestions. Story boards, i.e.. with wire frame drawings of the user interface can be used to explain work flows and use cases to stakeholders or programmers, usually not to users. 5 / 15!

6 The GOMS model calculates the time spent as a function of the load of user interaction of any given system. Eye tracking systems may be used to test the use of graphical elements on the screen and thereby provide further information to support statements about the user interaction, claimed by the users. Usability tests All of the methods mentioned above provide means of investigating how well suggested designs might work out - but the tests themselves may also be design in many ways, some of which are mentioned below. Summative tests provide you with results in form of 'good', 'bad' etc. and usually consist of a set of comparative tests, i.e.. for choosing one product rather than others. Formative tests are qualitative and might result in concrete suggestions for enhancements. The Web score-model, developed by Fraunhofer, is focusing on evaluation of web sites. The Card sorting test asks users to build information architectures (also of websites) by arranging the various categories, content items, headlines or content groups into useful information architectures, based on cut out cardboard elements of the site. Simple questioning the user about wording of i.e.. menu's, buttons etc. Also questions about how subtasks are perceived and accomplished may be of value. The questions might result in both summative and formative conclusions. It might be woth noting, that Jakob Nielsen claims, that only six users will reviel 80% of the mistakes made in any user interface. 6 / 15!

7 Improving usability of the WAYF federation WAYF Fig. 3 X?! 1 login The federated login sequence consists generally of four steps (Fig.3): - login-function at the service, typically a login button - choosing of home institution at the where-are-you-from service - login at the users' home institution - users' consent to data exchange, before releasing personal data to the service Recommendations and suggested improvements for the four steps will be presented below. Login functions at the service, recommendations Services connected to WAYF rely on external authentication mechanisms, namely those at the users' home institutions. In order to redirect the user to the list of connected institutions, the following principles for designing login functions at the services should be observed: - Indicate which authentication mechanism will be used: a local system or a federated login. If both are available make clear graphical hints as to which is which i.e.. by using the logo of the federation. - Prefer click'able buttons to hyperlinks as buttons indicates 'action' more than 'redirect', as the federated login is a series of actions (choose institution, login, consent to data exchange). 7 / 15!

On the left hand side a short text explains that the user must login at 'your institution' in order to access the service and shows an drop-down list of connected institutions (Fig. 5).

8 The Where-are-you-from (WAYF) service, present layout The present WAYF-page (Fig. 4), is framed by the same over-all layout as the main web site for WAYF. The page is divided in two sections: right and left. On the left hand side a short text explains that the user must login at 'your institution' in order to access the service and shows an drop-down list of connected institutions (Fig. 5). Clicking the 'FAQ/Help' link will open a new browser window presenting the FAQ/Help page of the federations' main web site. On the right hand side the page tries to graphically relate the page to the service, that the user wants to access, by showing the logo of the wanted service. A short text explains that the user was redirected to this page from the service. The purpose is to avoid potential confusion of being redirected to the WAYF site in stead of entering the service. Below the main frame of the page is contact information to the federation secretariat which will hopefully give the impression that WAYF is not an anonymous internet service, but something reachable. All web pages are intentionally kept relatively boring hopefully adding to the impression of being a stable, publicly funded and trustworthy infrastructure. Fig. 4 Fig. 5 8 / 15!

9 The Where-are-you-from (WAYF) service, new layout To simplify the overall impression of the WAYF-page (Fig. 6), and thereby reduce the users' short term memory load, the vertical, dividing line has been removed in order to present one single information area rather than two (arrow 1). Also the text explaining what to do is simplified on the left hand side (arrow 2) and text related to the service logo has been entirely removed. The button is now placed under the drop-down menu (arrow 3) - it's a generally recommended to place such buttons below lists, not beside them. Also the text on the button has been changed to 'proceed' (earlier called 'Select') (arrow 3), hinting at performing a series of steps (the next being login at the institution) rather than a single action. This supports Schneidermans' design principle of 'yield closure' by indicating that more steps will follow. Choosing from the drop-down list, but only activate the choice when pressing 'proceed' follows Schneidermans principle of 'locus control'. The 'More about WAYF'-link (earlier named 'FAQ/Help') has been moved to the lower right corner (still opens a new window) (arrow 4) and the language choice has been moved to a place above the solid green horizontal bar (arrow 5), consistent with the layout of the other web pages related to WAYF and thereby consistent with the principle of consistency of graphical layout. Fig. 6 To reduce short term memory, the page is supported by cookies so the last choice made in the drop-down list will be preselected automatically when returning to the WAYF-page the next time - provided the same machine and browser is used. There is no error handling for this page. 9 / 15!

Please note, that authenticating at one of the institutions does not necessarily provide the user access to the service as the authorization is handled solely by the service and not by the

10 Please note, that authenticating at one of the institutions does not necessarily provide the user access to the service as the authorization is handled solely by the service and not by the institution. If too little information about the user is received by the service, or the values (like name of user/affiliation/role) does not match a positive list of criterias, the user will of course not be let in. The WAYF architecture is by default open for any flow of information but both institutions and services may block any connection to/from the federation. If presented in the right form, this information might be used to enhance the usability of the system as described below. Fig. 7 When redirected from the service (in this case Ordbogen.com), the user will see the usual list of connected institutions, only some of them have been grayed out (Fig. 7). The service (Ordbogen.com) has provided the federation with information about which institutions are not costumers - and they will in turn be grayed out in the list, indicating that it's of no use to try to login at these institutions as the service will not let the user in. Also institutions might block access to certain services which will give the same functional result, as the user will not be able to access the service. This, of course, only works if information about access rules are made available to the system - if not, the institutions will not be listed as greyedout, even though no access will be given. 10 / 15!

11 Fig. 8 Users are expected to inuitively percieve the greyed-out institutions as 'not available' and therefore choose from the subset of not-grayed-out institutions. In case a grayed-out institution is chosen anyway (Fig. 8) an explanation is presented below the logo of the service, based on the system's knowledge about access rules. The text is intentionally not colored red, as red is a 'warning color' indicating dangerous situations or errors. As no error has accured, in fact everything is working just fine, the less dramatic black color is chosen. 11 / 15!

Authentication web pages, usability recommendations After choosing the his/her home institution on the WAYF-page, the user is redirected to the login page of the institution.

12 Authentication web pages, usability recommendations After choosing the his/her home institution on the WAYF-page, the user is redirected to the login page of the institution. The login page should be easily recognizable to the users, differentiating itself from other login pages and clearly show where/which institution the login page belongs to. Logos and tailored graphical layouts are highly useful for this purpose. An example is shown in Fig. 9. Information about WAYF, perhaps supported by links to WAYF's webpage, may be desirable to indicate the relation with WAYF. Fig / 15!

Consent to data exchange of personal data, present layout When the user has logged into his home institution, data about the user is transferred to WAYF which, in turn, filters out any information

13 Consent to data exchange of personal data, present layout When the user has logged into his home institution, data about the user is transferred to WAYF which, in turn, filters out any information not contractually agreed to be delivered to the service. Before the data release, the user is asked to consent to the data exchange. Consent is a legal term and requires that the user is made aware of the purpose of the transaction, the data in question and is able to withdraw the consent at any given time. Please note that any consent is personal and service specific. In order to comply with these requirements, WAYF has implemented a consent-function on behalf of all connected institutions. This way all users are presented with the same graphical interface (Fig. 10). For convenience the user might tick the 'Remember consent' box before consenting, in order not to be asked each time the same service is accessed. Fig / 15!

14 Consent to data exchange of personal data, new layout To support the principle of 'yield closure', the notion that the goal is near, the new consent page not only shows the logo of the service the user is about to go to, but also the logo of the institution the user just logged into (Fig. 11, arrow 1). Further more the users' name and information about where he logged in is presented along with the name of the service (arrow 2). In the second paragraph (arrow 3) the purpose of the service is presented with a short text. The rule of thumb is that it should not be longer than an SMS-message, 200 characters at maximum. To graphically divide the purpose from the users' personal information values, bold text is used in paragraph 3 (arrow 4), which asks the user to consent to the exchange of the information below. Here are the data type (arrow 5) and data values (arrow 6) that are about to be transferred to the service presented. Finally three buttons are placed below the user data, to force the user to at least skim the data before deciding. The 'Yes, I accept. Remember-consent'-button (arrow 7) is placed to the right, as this is believed to be the most common choice. Accept functions are more easily and faster handled when placed to the right rather than to the left, where the 'No, I do not accept'-button is placed (arrow 8). The explanation is rooted in the way re read texts (from left to right), and therefore in deeply rooted behavioral habits or patterns. The 'yes, I accept'-button is placed in the middle (arrow 9). The buttons' text is explicitly explanatory as the result of clicking is legally binding and therefore considered of relatively big importance. None of the buttons have been preselected thereby forcing the user to make an informed decision. Lastly, a link to information about consent and the legal aspects (arrow 10) has been added in the lower right corner. Fig / 15!

15 Further considerations The presented solutions are only seen as a second step in an ongoing evolution of usability as technology and experience matures over time. Already now new ideas have appeared that should be considered in the near future. These deal with color coding of user data, support for geo-representations, transparent federation login coupled with local single-sign-systems, consent-administration systems etc. Recommended reading ISO 9241 Ergonomics of human system interaction - Part 210; Human centered design process for interactive systems (formerly known as 13407) ISO/TC 159/SC 4, Ergonomics of human-system interaction - Part 110: dialog principles 15 / 15!

Testing is a very big and important topic when it comes to software development. Testing has a number of aspects that need to be considered.

Testing Testing is a very big and important topic when it comes to software development. Testing has a number of aspects that need to be considered. System stability is the system going to crash or not?