User interface suggestions

[Lorenzo Cangiano]

Hi, as a prospective lens user and recent eLife author I'd like to share some thoughts on my initial feelings with the user interface. First impressions are essential to acquire new users, so here's what I felt could be improved based on my first 5 minutes on lens!

1. Borders between the different panes should stand out a bit more clearly. If you stick with the 'flat' interface now very much in vogue in web design (i.e. no drop shadows), you should use different background colors. Personally I think that a touch of 3D contributes to function over form without cluttering the interface (see for example http://sixrevisions.com/user-interface/when-flat-design-falls-flat/).

1.1 Related to the previous point, it took a bit of clicking to make it clear that the 'contents', 'figures', 'refs', 'article info' are tab controls. I feel that some more feedback to the user is necessary. In the flat paradigm you could again make use of slightly different background colors.

2. The scroll bar for the main text pane with the underlying 'paragraph map' is very cool. However, I expected it to be on the right side of the pane, as we're all used to that location for scrolling. That could be a frustration for other users.

2.1 Took a bit of searching for the scroll button, which should also be made more evident (again a little bit of shadow would help).

2.2 For consistency I suggest replacing the default scroll bar for the right pane (figures, refs...) with something similar to what you use for the main text pane.

3. Anchor icons beside paragraphs. The tooltip appearing on hover should clarify what you mean by 'sharing the link'. I understand that you can copy the Url and send it by email (for example) so that someone else will go directly to that paragraph. However, that is not immediately evident.

4. The leftmost column seems a waste of space for just displaying a back button and a Lens 0.2.0 notice, at least that's what I see on your test article. One would expect to be able to click the browser back button to go back to the original article, while it confusingly (imho) traces back click history within lens. I'm not sure you can provide that behavior, but if you can I would recommend implementing it.

5. Article publication date must absolutely appear below title and authors, and not be confined to 'article info'.

Bugs:

In Safari 7.0 if the window is resized below a width of 1120px the 'refs' and 'article info' tab controls disappear entirely. My suggestion is to change your rules so that when the window is narrower than a given threshold tab names are omitted leaving only the icons (names can still appear on hovering).

This said, I really like lens! Good luck, Lorenzo

[Michael Aufreiter]

Hi Lorenzo!

Thanks a lot for your suggestions. Some issues you brought up have already been solved in the upcoming 1.0.0 version of Lens. You can see the latest build (which supports mobile devices) here:

http://quasipartikel.at/lens/#figures/all

Answers to the individual points are inline.

On Wednesday, December 11, 2013 10:31:49 AM UTC+1, Lorenzo Cangiano wrote:

Hi, as a prospective lens user and recent eLife author I'd like to share some thoughts on my initial feelings with the user interface. First impressions are essential to acquire new users, so here's what I felt could be improved based on my first 5 minutes on lens!

1. Borders between the different panes should stand out a bit more clearly. If you stick with the 'flat' interface now very much in vogue in web design (i.e. no drop shadows), you should use different background colors. Personally I think that a touch of 3D contributes to function over form without cluttering the interface (see for example http://sixrevisions.com/user-interface/when-flat-design-falls-flat/).

The new version is rendered on a white background using thin grey lines to separate resources. I hope they stand out just enough.

 

1.1 Related to the previous point, it took a bit of clicking to make it clear that the 'contents', 'figures', 'refs', 'article info' are tab controls. I feel that some more feedback to the user is necessary. In the flat paradigm you could again make use of slightly different background colors.

Those buttons now sit in the middle, and they no longer have a description. I'm aware the functionality is not obvious at the first glance, but given that we only have those 4 buttons, I thought that people will easily discover how it works. My intention with the design of Lens was giving the content most importance, and reducing UI "noise" to a bare minimum.

 

2. The scroll bar for the main text pane with the underlying 'paragraph map' is very cool. However, I expected it to be on the right side of the pane, as we're all used to that location for scrolling. That could be a frustration for other users.

That decision was made after careful consideration of both options. When displaying the document map on the right side, it adds too much noise to the main content area — we don't want people to be distracted with interactive UI elements in the center of the screen.

 

2.1 Took a bit of searching for the scroll button, which should also be made more evident (again a little bit of shadow would help).

I'll tweak that a bit I have some ideas to make that more consistent with the behaviour of classic scrollbars.

 

2.2 For consistency I suggest replacing the default scroll bar for the right pane (figures, refs...) with something similar to what you use for the main text pane.

That's a thought I had already. I'm giving it a try if I find some time. I'm only worried a bit about performance, using the native scroll features the offers definitely performs better.

 

3. Anchor icons beside paragraphs. The tooltip appearing on hover should clarify what you mean by 'sharing the link'. I understand that you can copy the Url and send it by email (for example) so that someone else will go directly to that paragraph. However, that is not immediately evident.

 

Anchors are gone, as we decided they are not important enough to claim a button in the interface. For deep linking you can now click on headings. I consider this a bonus feature that people discover over time .. (or not, which doesn't compromise the UX). Maybe I can add a little visual clue when a user hovers over the heading (like here: https://www.mapbox.com/mapbox.js/api/v1.5.1/#tileLayer.setFormat)

 

4. The leftmost column seems a waste of space for just displaying a back button and a Lens 0.2.0 notice, at least that's what I see on your test article. One would expect to be able to click the browser back button to go back to the original article, while it confusingly (imho) traces back click history within lens. I'm not sure you can provide that behaviour, but if you can I would recommend implementing it.

That space is no longer wasted in the latest version. Also using the browsers back/forward button now performs way better (in 0.2.0 we relied on a full refresh of the page)

 

5. Article publication date must absolutely appear below title and authors, and not be confined to 'article info'.

 

You're absolutely right.. I'll add the pubdate to the document cover node.

Bugs:

In Safari 7.0 if the window is resized below a width of 1120px the 'refs' and 'article info' tab controls disappear entirely. My suggestion is to change your rules so that when the window is narrower than a given threshold tab names are omitted leaving only the icons (names can still appear on hovering).

Any problems here with the 1.0.0-preview? 

 

This said, I really like lens! Good luck, Lorenzo

Glad you like it,

Michael 

----

http://substance.io

[Michael Aufreiter]

I've implemented 2.2 this afternoon.

Have a look here.. the rich scrollbar for resources definitely adds value, since you get a clue how many resources are displayed in total + highlighting of the selected resource (figure/citation)

http://quasipartikel.at/lens/#figures/all/figure_8

On Wednesday, December 11, 2013 10:31:49 AM UTC+1, Lorenzo Cangiano wrote: