Closed jamiefolsom closed 9 years ago
After discussing with Kurt, we still feel that it is important to have more than 2 images in the bottom nav, in order to suggest that the carousel continues. One solution could be that the carousel shows a sliver of the third image (like with the Discover navigation), if that is possible.
Could you mock up a version with 3 images in the bottom carousel so that we can compare the two?
Hi, @desigonz! To confirm: The concern is that if I have >2 Favorites, there's no way of knowing that I can swipe through the footer carousel to see all my favorites. Is that correct?
If you can confirm, I'd like to have us discuss ways of solving for that in addition to fitting three full slides into view.
Thanks!
Mark
Hi Mark—yes, the concern is that with two or fewer favorites, it's not obvious/intuitive that you can swipe through the carousel. We'd be happy to discuss possible solutions.
Thanks! I need to ponder these a bit and come up with some options. I see the issue but we need to stay compatible with bxSlider, too. I'll update this when we've bounced around some ideas.
I think the best option within reach is to add some margin (slideMargin:x
) around the slides, so that it's clearer they're distinct thumbnails, and enable narrow prev/next arrows (controls:true
). Swiping will still be supported on touch devices, but it will be clearer to the user that they can navigate through their favorites (or related events, etc) here. If the user has 2 favorites, it will be clear that they're distinct thumbnails. If the user has 3 favorites, the next arrow will appear, indicating that they can move forward into the list. Setting infiniteLoop
to false
(to ensure users don't keep swiping through the same 1 or 2 slides) will also achieve the effect of only showing the next arrow when there are 3+ items until you move forward, at which point the previous arrow will appear.
There is no way to switch to left alignment when less than 2 items are in the corresponding list because positioning is calculated dynamically in bxSlider's JavaScript. This should hopefully be a limited case when a user is just starting to interact with the app. I see the left alignment goal as demonstrating your single favorite is the 1st of n favorites, and showing a space to add more, but this isn't something we can support without new work. We do refresh the UI when you add your first favorite on the Discover screen, and that should cover a good percentage of instances to illustrate to the user that they are able to add to that list and see it grow.
You can see what's supported at http://bxslider.com/examples/carousel-demystified
We turned to bxSlider in the design phase based on the following (from the site). It covers a lot of bases in cross-browser, cross-device, touch device-based development.
Let me know how the margins + arrows solution sounds and we can get that running to look at.
Thanks!
Mark
Hey there! I've gone ahead and changed the carousel so that it is using square images, so we can fit three thumbnails on mobile (and a bit peeking out on the right). I've added a little bit of space between the items as well. As the width of the browser or device gets wider, it will simply reveal more and more thumbnails as needed. Let me know what you think -- thanks!
(If you're in the homescreen app, you may need to delete and recreate it to see these updates. It would help to clear your Safari history, cookies and data, via Settings -> Safari, first.)
Thanks for all of the carousel fixes! It looks really great; we like the left alignment and the non-infinite (finite?) swipe. The thumbnail peeking out on the right also looks really great, but I think it would make more sense if we had two thumbnails with a third peeking out—would you mind mocking that up?
Hi, @desigonz!
With the thumbnails square, that's going to increase the height of the footer and take away from the content area.
If the request is to go back to the wider thumbnails, so that the heights are shorter, I'll need to check with Sherri on whether the solution we've hit on here can accommodate that.
Can you confirm how you'd see two working? (Taller squares or wider images)
Thanks!
Mark
Hey there, all!
Here are the options I'm seeing (let me know if I miss any):
Hi—the third option seems best. We're not wedded to the squares; we'd just like to hint that there are more events when you continue swiping. Thanks!
I've made the changes for option 3, to have the images be rectangular (I actually reduced the height slightly, in order to make the math for the cropping easier), and I think it's all looking pretty good! Let me know what you think when you get a chance. Thanks!
We reviewed this and think it looks great! Thanks a million.
Capturing a few thoughts on this one:
My reservation with this one is that we had tried 3 images during the design phase and found that to be less than optimal. And there's a potential navigation/usability issue here.