Usability of Log-in pages

Just quickly, some log-in pages of popular services have gone to the too fancy side of things. Which is not really usable. Let’s see, as an example, vimeo:

vimeoLogInScreenshot

vimeo LogIn Screen

So, when I browse to the log-in page, the focus goes to the first text field to enter the… username? Maybe the e-mail address? Maybe both are ok, as it is increasingly the case (btw, how do they handle md5 in this case?)?

OK, so you’ll have to tab to the password field so that the focus leaves the first field to discover that only e-mail does the job, and then Shift+tab back to fill it in. Sorry, but there are so many services we use each and every day nowadays, that it’s not very usable to do that all the time.

Overall, the recent vimeo redesign was lovely and only details like this were not taken care of. And, in fairness, many popular services now have the same log-in model (auto-focus on the field) which is why I decided to write about it. It’s not that I have a problem with vimeo in general (it should go without saying, since I am using their service, but you never know).

So, I prefer services that have remained a bit more old-fashioned and always show you what they need from the user, so far Linkedin and WordPress are like that. See below.

Linkedin ask for your e-mail and, despite the auto-focus, you know, because the label is before the text field.

logInLinkedin

log-in Linkedin screen

WordPress is good with e-mail or username (really, if you know how the md5 works in this case leave a comment), again the label is before the text field.

logInWordpressScreenshot

log-in WordPress Screen

Next time you design a log-in page, consider! 🙂

Advertisements

Visualising Dublin Recycle Facilities

I participated in a project that was developed during Interactivos?’12 Dublin which was organised by Medialab-Prado and was part of HACK THE CITY, Dublin’s 2012 flagship exhibition organised by Science Gallery.

The project was called Thanks for Recycling and originally was an idea of Martina Kalogjera.

We did a number of things, but what I’d like to talk about here is how to visualise geo-located data using the longitude and latitide and skip tiles and other tedious work. So, we got our API key for Dublin City maps and we were good to go. We queried the data to find the existing data facilities.

The data response looks like this (that’s just a sample here):

<?xml version="1.0" encoding="UTF-8"?>
<markers>
    <marker id="715" lat="53.34166204059" lng="-6.2142513929251" 
cls="false">
        <name><![CDATA[Ringsend Recycling Centre]]></name>
        <address><![CDATA[Pigeon House Road, Ringsend, Dublin 4]]>
        </address>
    </marker>
    <marker id="1798" lat="53.354949345405" lng="-6.2443851012856" 
cls="false">
        <name><![CDATA[Shamrock Terrace Recycling Centre]]></name>
        <address><![CDATA[Shamrock Terrace, North Strand, Dublin 1]]>
        </address>
    </marker>
    <marker id="104" lat="53.310275616603" lng="-6.2745812625401" 
cls="false">
        <name><![CDATA[Bring Centre Herzog Park]]></name>
        <address><![CDATA[Orwell Road, Dublin 6]]></address>
    </marker>
    <marker id="1799" lat="53.355334884953" lng="-6.27803326980319" 
cls="false">
        <name><![CDATA[Bring Centre Grangegorman ]]></name>
        <address><![CDATA[Grangegorman Road Upper, Dublin 7]]></address>
    </marker>
    <marker id="2006" lat="53.325739799004" lng="-6.2895988199836" 
cls="false">
        <name><![CDATA[Bring Centre Eamonn Ceannt Park]]></name>
        <address><![CDATA[Rutland Grove, Crumlin, Dublin 12]]></address>
    </marker>
    <marker id="2014" lat="53.324706069157" lng="-6.3090944344926" 
cls="false">
        <name><![CDATA[Bring Centre Windmill Road]]></name>
        <address><![CDATA[49-51 Windmill Road, Crumlin, Dublin 12]]>
        </address>
    </marker>
</markers>

Which is how most of geo-localised data look like. Initially, we thought that a web-based service would be quick to do what we wanted: to represent a circle around each recycling facility which represents 10 minutes walking distance around it. In this way we would see which areas have a recycling facility within walking distance.

However, using web services was not faster than using Processing and the library Unfolding (you can find it at your usual library-finding place). So we wrote the following code:

import processing.opengl.*;
import codeanticode.glgraphics.*;
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;

de.fhpotsdam.unfolding.Map map;

ListrssGeoLocations = new ArrayList();

public void setup() {
 size(900, 600, GLConstants.GLGRAPHICS);
 smooth();

 map = new de.fhpotsdam.unfolding.Map(this);
 map.zoomAndPanTo(new Location(53.32f, -6.25f), 14);
 MapUtils.createDefaultEventDispatcher(this, map);

 loadRSSGeoLocations();
 }

public void loadRSSGeoLocations() {
 // Load RSS feed
 //String url = "http://www.dublin.ie/maps/api.php?apikey=yourAPIkey
 //&action=getFacilities&what=recycling";
 //or save to a local file: 
String url = "dublin.recycling.api.php.xml";
 XMLElement rss = new XMLElement(this, url);
 // Get all items
 XMLElement[] itemXMLElements = rss.getChildren("marker");
 print(itemXMLElements[0]);

for (int i = 0; i < itemXMLElements.length; i++) {
 // Adds lat,lon as locations for each item
 float lat = itemXMLElements[i].getFloat("lat");
 float lon = itemXMLElements[i].getFloat("lng");
 print(lat);

 rssGeoLocations.add(new Location(lat, lon));
  }
 }

public void draw() {
 background(0);
 map.draw();

for (Location location : rssGeoLocations) {
 float xy[] = map.getScreenPositionFromLocation(location);
 drawEarthquakeMarker(xy[0], xy[1]);
  }
 }

public void drawEarthquakeMarker(float x, float y) {
 noStroke();
 fill(200, 200, 0, 100);
 ellipse(x, y, 140, 140);
 }

Which is *really* short, and does the job. Note that it gets “lat” and “lng” from the XML response. No tiles, no nothing. And the result we got:

dublinRecycleCentres

There you go 🙂

More about the whole thing, here.

Georgian transliteration rules

As you might have seen, I have built some transliteration rules for various alphabets. As of now, I completed rules to transliterate the Georgian alphabet to Latin.

This time, I used a combination of orthographic and phonetic transliteration.  This was achieved through heuristic evaluation with native speakers and through monitoring social media. One could say the result is a simplified mix of the Georgian government’s proposed romanisation and ISO9984.

Georgian→Latin:

Georgian to Latin

Georgian to Latin (results may have been improved since the screenshot was taken)

EU Arms Sales to Egypt 2011 Data Visualisation

Egypt is still in turmoil, and after some Czech ammunition was found in Tahrir Square, NISAT searched Eurostat and released some data about EU arms exports to Egypt. NISAT have a map tool that goes only up to 2009 and the data released are from 2011, so I made this visualisation below:

EU Arms Sales to Egypt data visualisation

EU Arms Sales to Egypt data visualisation

This matter has got my attention after @asteris tweeting about it.

An Infographic on Remaining Fossil Fuels

How much oil, gas, coal is there? What regions are affected by related conflicts? See the infographic below:

Fossil fuel stock visualisation

Fossil fuel stock visualisation

Data from http://www.informationisbeautifulawards.com/2011/09/premiere-challeng/

Visualising Spanish Art Mobility: an “Infographic”

From June 14 to July 1 at Medialab-Prado, Madrid, Visualizar’11: Understanding Infrastructures offered an international project development workshop and a theoretical seminar where selected papers were presented.

I participated in both the seminar and the workshop; you can see my seminar presentation here. From June 16 to July 1 I participated in the Dromoart project, organised by Arquitectura Expandida and Microgramma. Other participants included Gaston Gontero and Cristina de Miguel.

The project is about mobility of Spanish art ({im|ex}ports to/from Spain). We made a prototype of visualisations during the workshop; reflecting on what we can do next, I made this “infographic” below (collection of visualisations rather than narrative, hence the quotes). Click to view full size:

dromoart Infographic

dromoart Infographic: Click on image for full size

Hope you liked what we did, will keep you posted for any further development. 🙂

Visualising Demographics at UK Universities

I did the following for this competition:

Black students In the UK

Black students In the UK

I will say a couple of things about the process of making this. What happens is that I’m very busy because I’m presenting at Visualizar’11. So what I wanted to do was to get a quick idea of what’s happening in UK universities wrt demographics, and then visualise it.

That is, this is a visualisation for the busy person who just wants to see the big picture and get a clue of what the story is without drilling into piles of hard data. It seems to work for me, what do you think?