cat-users AT lists.geant.org

Subject: The mailing list for users of the eduroam Configuration Assistant Tool (CAT)

List archive

Re: [cat-users] CAT website design

From: Zenon Mousmoulas <zmousm AT noc.grnet.gr>
To: cat-users AT geant.net
Subject: Re: [cat-users] CAT website design
Date: Fri, 06 Nov 2015 11:07:38 +0200
Authentication-results: prod-mail.geant.net (amavisd-new); dkim=pass header.i= AT noc.grnet.gr
List-archive: <https://mail.geant.net/mailman/private/cat-users/>
List-id: "The mailing list for users of the eduroam Configuration Assistant Tool \(CAT\)" <cat-users.geant.net>

Perhaps I will go slightly off (your) topic, but this brings back the discussion about whether "X-Frame-Options: SAMEORIGIN" would somehow hurt CAT usage e.g. in captive portals, where I suggested during the last eduroam-sg call that it would be good if CAT explicitly suggested how to embed the CAT UI in other web sites.

In the most simple form, that would mean an alternative, minimal (no bells and whistles) front page, explicitly designed to be responsive etc. so that it can be called from a variable size iframe.

Another option, going further, would be to provide a javascript library for easy inclusion of CAT elements on a web site. That would work through XHR calls to the CAT user API. It would be "skinnable" in the sense that appearance would be controlled with CSS. It could also just serve as a starting point for anyone who would rather (for any reasons) have their very own "CAT UI client". The first step in this direction would be to facilitate XHR calls to the API, as currently (IIRC, at least on production) it neither supports jsonp nor serves CORS headers.

I think it's not unrealistic that an NRO or an institution may want to use/present CAT data without sending the user to the CAT web site, so this should be facilitated. On the other hand, considerable effort has gone into translating the CAT UI in many languages, and that should not go down the drain.

Cheers,
Z.

On 2015-11-06 10:08, Stefan Winter wrote:

Hello,

on the more concrete topic of UI design :-)

In my previous long-ish mail, I made the point that a central place to
store operational data (the "backend") is an important asset.

UI is one of the things which don't need to be centralised - the only
thing I want to have ensured is that the feature set of the end user
download pages does not lose out in alternative UIs.

I could imagine adding a "theme" or "skin" module to CAT (yes... I
know... "skinning the CAT" :-) ).

Let me sketch this as follows (which is pretty much along what Tomasz
wrote elsewhere in the thread):

* federation admins can upload a *federation* logo
* and specify which theme they want to show on the user download pages
* CAT is shipped with a number of such themes which are capable to
re-brand to those local logos
* CAT is also API-wise prepared to an installation of the UI parts
decentralised, with the installation contacting the central instance for
the actual delivery of installers and other data from the backend

This would give much more flexibility for local presentation of the
service; to the extent of running user-facing things on their own web
server.

Those who write skins in the CAT repository would be under some scrutiny
to not accidentally leave out important features of the download page by
the the core devs; that's an amount of control that makes sense IMHO -
after all, IdP admins configure settings like redirects or custom
messages in their inst data, and can rightfully expect that it is
actually used.

Of course this won't prevent people to write their own skins outside our
control. I would hope that there is very little to no incentive to do so
though.

I wonder how that sounds to you?

Greetings,

Stefan Winter

Am 05.11.2015 um 11:21 schrieb Tomasz Wolniewicz:

Hi Jasper,

W dniu 2015-11-05 o 08:52, Metselaar Jasper pisze:

Hi Tomasz,

First of all, I never meant to offend you. I just wanted to help to make Eduroam and CAT even better than it is today.
No offence taken, I know you mean well as well as I know my limits and
how important it is to make the system nice and friendly. Also, when you
will see my replies below, when I say that something is already
implemented the way you describe, do not take this as an argument,
rather as showing that even when describing a functionality you may be
thinking of a different implementation then I did when thinking about
the exactly same problem. This is why it is so hard. There is also one
other reason for CAT looking the way it does - it was designed to follow
the eduroam site design at that time. Since then the site has changed,
but there was talk about next changes, so we waited.
Many of my explanations just say why things are the way they are.
Sometimes these are valid technical reasons, sometimes they are just
some history, and I could avoid them, still for once, I will present an
extended version, and in the future will try to stick to the essence of
things.

If it was up to me, http://cat.eduroam.org would contain the following parts:
1. A short description of the Eduroam and the CAT Tool. (Something like what is Eduroam, what is the CAT, why should the user use it and who is behind it)
This is the first issue already. We already have a part of that and I
would want to expand the "about" part, listing the contributors, but
also all software packages that we use. Sure, the packages are clearly
described in our LICENSE file but, I think that this deserves more
exposure. Still, an average user could not care less, and making this
information too obvious would be taken as a nuisance.

2. The selection list of institutions, sorted based on Geo location. Users should not need to click on the download link here.
Well, what we are using now on the "main site" is an adapted DiscoJuice
form Uninet, which has many nice features, but does require a click and
would be hard to avoid that. I rather like DiscoJuice but this is open
for discussion, of course. However if you take a look at
https://cat.eduroam.org/basic.php (which is meant for smaller devices,
so make your browser window narrow) this is exactly what we have.
We select the country by geolocation and then provided a sorted list
also based on IP (not device) geolocation.

3. Selecting an institution would take the user to the download page with OS detection and the option to download the installer for other OS and versions. Just like it does today. This part of the process today is pretty good on the desktop version of the website.
4. A link to the FAQ
5. Terms of use in the footer of the page

The footer is already overloaded and causes endless problems, possibly
because I could not have thought of a perfect way to implement it. My
design goal was to have the footer at the bottom of the screen when the
contents is short and at the bottom of the scrolled text when the
content is long. There seems to be no clean way to do it with CSS. Doing
this with JavaScript is error prone, unfortunately even more so then I
realised (I may have introduced some new bugs trying to avoid some old
ones). Unless someone can come up with a clean design of how this should
be done we will continue to have problems with it. The footer seems to
be a necessary part of the page due to obligations following financing.
6. A report a problem link could also be included, but the page it directs to should include that the IT department of the users home organization should be their first point of contact when it comes to support.
Initially we thought (wrongly) that having contact information, after
you have selected your institution should be it. This is what we print
and hopefully cannot be missed. We thought that people will realise the
difference between the CAT problem and the local problem, but of course
this does not quite work this way. So, yes definitely extending the text
is necessary, also for other reasons - we should explicitly say that the
message will go to the list, so the people do net get offended when they
realise that their question went public, and also that their questions
should be in English. Unfortunately fiddling with existing tests is
something we try to avoid as this immediately causes extra work for all
CAT translators. Still this one will have to be done.

7.And of course, the site should support localization/translations.

Which is now does (I expect you know). The language is auto-detected and
you can also change it using the list. The implementation of the
language selection as a list and not a select was an advertising attempt
so that even if you do not care to change the language you always see
all those languages that we support. This does not scale, of course, so
will probably have to go, but how to make it both usable, noticeable and
pretty is something that I have problems imagining.

I don't think there is a need for an Admin link or a link to become a CAT developer (these can be in the FAQ)
Another point is the "information banner", like "CAT was recently upgraded to version 1.1.1 Please report any issues to the mailing list cat-users AT geant.net". I don't think this is useful for end users, unless it is solely used for serious problems like "We are currently experiencing issues with the Windows Installer and therefore it can't be downloaded right now". If that's the case it should stand out more.
I agree about the admin link being a nuisance, but this will, of course
require that the admins will need to remember a new link or know where
to find it. The message - it is the Message-of-the-day meant to be
popped up for special occasions, it probably should be taken down now.
It is easily configurable, as you may guess. I would argue that
information about an update does make sense, but this really is more an
operational issue.

Regarding the design: I would like to see a modern, clean and light design (no need to make it to flashy). It should also be responsive, so that it has a consistent look on all devices. Using a framework like Bootstrap could be very helpful here.
Personally I think https://eduroam.no/connect/ is a good example.

We thought that braging about the platforms we cover, signatures,
security etc. is important and should be flashed. You should realise one
important aspect. CAT is all about eduroam security. It is now easy
enough to connect to eduroam by just providing username and password, so
why bother about installers. Well, security is why. We need to tell
people that, perhaps we should be even more explicit. We know people do
not care, but this does not release us from an obligation to tell them
they should care. Also there is one other aspect. When we were designing
CAT, moving banners were the thing to have as were 3D buttons, now we
are observing that people got tired, there is a trend towards simple
flat design, even Apple got rid of their 3D iOS design. For us, as CAT
developers, the installers, configuration, admin tools are the essence
of our work, changing the essentially working design to something more
trendy did not seem to have such a priority. But CAT has grown to be
really big, so should our priories, perhaps.

Some clarification about the current UI being confusing: how confusing it is, depends on how users are getting there. If end user has a link to a specific organization of profile, it isn't that confusing (as long as you are using a desktop browser).
However, when the end user gets https://cat.eduroam.org as a starting point, which is not unusual when helping a user by phone or face to face, the problem becomes more obvious.
1. Many users are missing the "Eduroam user: Download your installer-button". They are just looking at the menu on the left.
Hard to imagine how you can miss such a big button, but you cannot argue
the facts, if they are missing it then we have a problem :). Still, I
think the typical support problem that always occurs is that you will
have 1000 people for whom the design is absolutely obvious and then
comes the single one who does not get it and it is this single one that
complains, while those 1000 will never speak.
As I said in my previous mail, we are not getting any real user problem
reports, so either they all go to the local IdPs - which would be a very
good sign, or the users manage. Of course there is a third possibility
that users just go away, but statistics do not seem to confirm that.

One quick solution would be to repeat the download in the left menu as
well, but if we redesiggn the whole thing then everything will probably
look different.

2. When they clicked on a menu entry on the left? How should they get back to the startpage? Why isn't there a link to the start page? (most users won't notice the link on the top right of the screen).
There is an X icon in the right top, which normally closes windows -
unfortunately as just observed, it sometimes messes things up, due to
this footer mess (this is a bug that needs to be fixed, of course).

Most trust concerns are, as you might understand, related to the mobile site. It isn't very appealing and many users, especially on Android, have been warned to download stuff from other sources that Google Play.
Problem here is that there is no explanation at all, not about CAT, not about Eduroam. Nothing. Just a download link.
And yes, basing trust on the looks of the site is strange in itself, I agree. But for many users without a technical background, this is the first step in rating a site's trustworthiness. Hopefully they will also check that the site has SSL, but unfortunately most of the users will never look at the certificate itself.
There are also minor trust problems regarding the desktop version of the site, like: What or who is GÉANT Assosiation? What do they have to do with Eduroam or my University/Organization?
This sounds like we should have a link "What is eduroam CAT and why
should you trust it?" This is a very valid point. If there are users out
there who actually care, then they should be reassured. However this
should also mean that we need a very visible link both in CAT and on the
eduroam site confirming that the two are in the same box.

But here we actually come to the beginning of this discussion. One or
many CAT instances. I think that the best for building security is that
all NROs point to the central CAT.

I hope this mail explains the current issues a bit more in extend and that my opinions and suggestions are (somewhat) useful.
Definitely, thanks a lot and excuse me for writing too much, but
possibly also this explains some background.
Tomasz

Best regards,
Jasper

-----Ursprungligt meddelande-----
Från: Tomasz Wolniewicz
[mailto:twoln AT umk.pl]
Skickat: den 4 november 2015 22:08
Till: Metselaar Jasper;
A.L.M.Buxey AT lboro.ac.uk
Kopia:
cat-users AT geant.net
Ämne: Re: SV: [cat-users] CAT website design and Swedish translation?

Hi,
Being the designer of the UI it is not that nice to hear that, but frankly I realise that the interface could be really improved and I am more then open to move forward in this direction. Perhaps, replacing the mobile interface would be a good starting point. I will happily discuss why the current GUI works the way it does and what functionality should be preserved.

Why don't we start by discussing why organisations/NROs think CAT does not meet their needs. With over 2.5mln of user downloads we cannot be doing all bad.

I suggest we restrict the discussion to the user interface. The admin interface has a limited audience and there it is more important what we can do with it then how this is done, it would be also much harder to change.

If we want to go forward then we need clear statements.

The first one is that the interface is ugly - no need to explain, but there is space for discussion of what user group should it address, should it be plain and simple or perhaps more flashy. Should it be a starting point also for the admins, or should we have a separate page for them? Can it have a different installer selection process? Is the welcome message a good thin to have or should we skip that?

The second is that the interface is confusing - after those 2.5mln of user downloads this is the first time I hear that the interface is confusing or that someone would find it so strange that they would not trust it. Actually this last one, basing trust on a site on its looks is somewhat strange in itself :). Therefore please explain.

Cheers
Tomasz

W dniu 04.11.2015 o 21:21, Metselaar Jasper pisze:

This discussion has become an interesting one. :-)

The best solution, in my humble opinion, would be a central CAT site.
But the main reason that other configuration sites pop up is because the design of the official site is not very intuitive and confusing for end users. Especially the mobile version is confusing and I have heard quite a few users saying that they would not trust that site.
My guess is that, if the official CAT site would be more attractive, with a easy to use (end user)interface, there wouldn't be a need for most of the "local" implementations.

Personally I don't think there are many organizations/NROs that want to create, host or maintain a CAT site just because they can. They probably started their own CAT site because the official CAT site doesn't meet their needs.

/Jasper

-----Ursprungligt meddelande-----
Från: Tomasz Wolniewicz
[mailto:twoln AT umk.pl]
Skickat: den 4 november 2015 20:12
Till:
A.L.M.Buxey AT lboro.ac.uk
Kopia:
cat-users AT geant.net
Ämne: Re: [cat-users] CAT website design and Swedish translation?

Hi Alan,

W dniu 04.11.2015 o 19:38,
A.L.M.Buxey AT lboro.ac.uk
pisze:

so, how about this - each NRO can host such an interface but they are
ONLY able to present their orgs in the list ?

Yes but what about foreign visitors, which place will they go? Will it be obvious that they should go to their country federation?
Are we not loosing the functionality of a single full IdP listing?

I see not problem in completely separating the CAT back-end and the user front-end. The current approach already implements this to a very large extent. Refactoring the code so that you would have a separate installation for the front-end and for the back-end would not be a big job.

As the CAT developer I am quite happy with any new challenge, and distributed, configurable user interface would be just that, but as the eduroam advocate I am worried about our unity. What I cannot comprehend is why we cannot agree that as we promote the single eduroam as an international cooperation symbol, we cannot agree on using a single configuration site. And what next, are we going to have a separate Android eduroamCAT for each federation? By separating the access sites we will also lose the common place where user come with their ideas, be it a complaint about the UI being ugly :).

Tomasz

--
Stefan WINTER
Ingenieur de Recherche
Fondation RESTENA - Réseau Téléinformatique de l'Education Nationale et
de la Recherche
2, avenue de l'Université
L-4365 Esch-sur-Alzette

Tel: +352 424409 1
Fax: +352 422473

PGP key updated to 4096 Bit RSA - I will encrypt all mails if the
recipient's key is known to me

http://pgp.mit.edu:11371/pks/lookup?op=get&search=0xC0DE6A358A39DC66

Re: [cat-users] CAT website design and Swedish translation?, (continued)