2

I imagined that this would be a topic covered on here or on some other place on the internet, but have struggled with finding the right key words or any sort of literature on the calendar.

I would like to ask if there is anything on the subject on the topic if lines around numbers will help/speed up users picking a date. Please see the screenshot below.

Calendar without borderlines and with borderlines

The initial feedback from the static image mockup is that people much prefer the calendar with the lines. On the other hand one person who is dyslexic, is feeding back that the lines is confusing them and this was interesting for me. However, I'd like to ask for people's expertise and experience on this.

Improve this question

1 Answer 1

Reset to default
3

If you go by the principles laid out by Edward Tufte. Less is more. He describe this as the "Data-ink ratio"

"Data-ink ratio = data-ink / total ink used to print the graphic = proportion of a graphic's ink devoted to the non-redundant display of data-information = 1.0 - proportion of a graphic that can be erased without loss of data-information"

One should

  • "maximize the data-ink ratio, within reason"
  • "erase non-data-ink, within reason"
  • "erase redundant data-ink, within reason"

Here's a good visual summary of this in action from Darkhorse Analytics.

enter image description here

Summary

A calendar is like any other data table. The borders aren't providing any additional info and thus should be removed.

Improve this answer
4
  • I'm not convinced by the argument that less lines means it's easier to digest. This is coming from a graphic designer, not a UX designer. I have been and will biased with the view that minimalism will visually looks nicer, but usability wise unless theres data to back that up I'm not sold on this idea. I suppose ultimately it is the data where people have tried this out that I'm after.
    – Choizilla
    Feb 12, 2016 at 11:25
  • Alright, let's go back to the basics. A line adds weight to an area, and thus draws the eye to it. The original premise of grid lines is to guide the eyes along the line so you stay focus on a row of data. And this is what you get if you use horizontal lines to separate data rows. You're putting emphasis that a data on the row should be read as a group. If you put in vertical lines to separate data columns, you achieve the opposite effect, data in the column should be read as a group. Using both sets are reserved for super dense datagrids where space is at a higher premium than readability.
    – nightning
    Feb 12, 2016 at 18:24
  • In the case of a calendar picker, space is not a concern. Is there a recommended way of reading dates of the calendar? Not really. Somebody might go by the week to pick out the date. Other people might look at day of the week first. As to usability testing, did you actually measure the speed it takes to use or just ask for their opinions? People are not necessarily a good judge on how they use something. In an actual test, I suspect this is such an easy to understand UI that for most ppl it doesn't matter. And if it affects ppl with dyslexia, go with the opinion that helps with that.
    – nightning
    Feb 12, 2016 at 18:31
  • Hmm, interesting perspective. "In an actual test, I suspect this is such an easy to understand UI that for most ppl it doesn't matter." I'm just interested in the small gains we can do with simple tweaks. Perhaps you're right and it doesn't matter :) I'm going to try some other variations and test those out too, thank you for the feedback.
    – Choizilla
    Feb 15, 2016 at 11:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.