BibSonomy Blog: BibSonomy gets a new front-end

Sunday, August 3, 2014

BibSonomy gets a new front-end

We're currently working hard on a new user interface for BibSonomy. In the past, we've had lots of hints on how to optimize the layout, accessibility, and usability. We're scientists and programmers but we aren't product designers or experts of human computer interaction. So we've decided to use a framework that helps us to implement all these necessary improvements.

There are lots of front-end frameworks out there. We’ve chosen Bootstrap for the following reasons:

Bootstrap is open source and freely available
It supports responsive web design. It is very hard for a community of an open source project to develop and maintain two front-ends. With Bootstrap we develop code once-only and it works for computer screens, tablets (like the iPad), and smartphones
Bootstrap is widely used. The look and feel of all elements is familiar.
And of course, it looks great ☺

The aim of a new front-end is to achieve an easier way to interact with BibSonomy. For this, we’ve defined a few rules, which we try to implement with the switch to Bootstrap.

Give all elements room to breathe! Currently, there are too many control elements spread over areas that are too small.
Use larger fonts! Large fonts create larger clearness and better readability on mobile devices.
If possible, use existing standard elements of Bootstrap. The elements of Bootstrap are approved and established. They are tested on different devices and browsers.
Help the user where he/she needs help. With the last front-end redesign, we have added a lot of help and hints. Now we want to use it so it supports the user even better.
Keep navigation menus clear. Easier menu structures helps users to find what they are looking for.

Finally, I would like to give you some insights in the new front-end: