menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Stark

The suite of integrated accessibility tools for your product design and development team.

Channels
Team

Obligatory Cal UI

August 15, 2018 at 7:03pm

Obligatory Cal UI

August 15, 2018 at 7:03pm
Working on something for the v2 of Iris Health at the moment :) Figured I'd share the obligatory calendar UI. This shows up when you're selecting a date for, say, medication being taken, logging anything related to sexual health, etc.

August 15, 2018 at 7:25pm
Nice! Why did you opt to clip the other months?
like-fill
2
And maybe related to what is saying, what if you want to go back (or forward) longer then a month? Say december for example, you have to do some clicking right?
You'll actually be able to slide to go back or forward. For me, it was for two reasons:
1. Show folks there are months "hiding" there.
2. To allow for more whitespace because it would be cluttered once you have longer months next to each other (October, November, December). Granted we could probably abbreviate but I was trying to avoid that. Whatever, ultimately, conveys the best message with less confusion.
Yeah, here you'd certain have to swipe. So it's certainly an assumption but my thought was that if you swipe "fast enough" we'll then stop showing months and instead show the year in a similar way that iOS does it when swiping through contacts and instead starts showing you the overall letter groups (A, B, C, etc.). Does this make sense?
Ahh I didn’t get that you had to swipe right away (might be due to the fact that I’m on a laptop when I viewed this). Moreover, I think I tend to see something is swipeable when there are gradients.
here are a few variations I was thinking
like-fill
1
like-fill
2
personally I like having an explicit button/link
although that doesn’t quite help with your year navigation idea of swiping faster to get to navigating by year.
One other small thing that I noticed was that tuesday is blue. I’m curious as to why that is highlighted. It’s pretty subtle.

August 16, 2018 at 5:26pm
Holy smokes, . These are awesome. Thank you so so much for taking the time to whip these up as much more efficient alternatives. I'm a huge fan of both options on the left. Going to implement both within our design and see what feels best on device. Thank you! <3
awesome! Yeah, it’s often easier for me to just make a few tweaks in Sketch than trying to describe what I’m thinking. Glad it could help!
like-fill
1

August 21, 2018 at 3:38pm
that makes complete sense :)
Nice feedback Kev.
like-fill
1
Cat, how would the user "select month, date or range"? Usually these pickers support one of those interactions but not all three.
Comment is my first one up top, IIRC! :)
Thanks, saw that but I was thinking specifically about the instructions "select month, date or range" because on my products we have different use cases for this type of date picker. Sometimes we need the user to select a single date, other times we need a date range. I was wondering if you were planning to use this for both cases and if so how the interaction works. Maybe I'm reading too far into your mockup, but It got me thinking.
like-fill
1
I think what James is getting at is how would a user know to select a JUST a month? It seems like it would be best to have a separate picker that just had a list of months rather than showing dates as well. I imagine you have already thought about this overloading of functionality however from just the mocks here it seems a little confusing and overly complex.
like-fill
1

August 27, 2018 at 7:22pm
That's very true. We're exploring more with this! All great questions from you and . Can't thank you enough for allowing me to pick your brains!

September 21, 2018 at 9:18am
Just to stay in keeping with Stark; The gradient texts in this example are hard to read, and since they are the only indicator there is more, you might want to consider a different solution.
like-fill
1

September 21, 2018 at 11:55pm
Hey! This is actually for a different project :) However, you're right regarding contrast! We came up with a happy solution and contrast is all passing, IIRC ;)