Smart Sweets: mobile navigation UX
The low down
Last Thursday, I was looking for a candy brand that was certified gluten-free for my girlfriend and I ended up stumbling on Smart Sweets. This is a candy brand that makes candy from all-natural ingredients and ensures that there are no harmful additives, sugar alcohols, and additives to this product. Therefore, their candy is simple, clean, and fun, just like their website.
At first glance, this website has a good user experience. Within the site, the tone is fun and bold, the call to actions are clear and exciting (because who doesn’t get excited about candy!), provides detailed information on their candy ingredients, and includes a fun surprise when the cursor is hovering over a product picture. However, this website has an interesting navigation method.
The nitty-gritty
On the desktop/laptop version of the site, features a sticky navigation bar (jargon to say that the navigation bar is “stuck” to a position) that allows that users to switch to a certain page in less than three clicks. But, when the viewport is less than 1025 pixels… something interesting happens.
Once the viewport switches to a mobile format, the sticky navigation bar turns a sticky combo bar that is placed on the bottom. The navigation bar than adds and uses a stylized hamburger menu to hold the navigation links, the Smart Sweets lettering to link back to the homepage, and a shopping cart icon to direct the user to the checkout. The interesting part of this navigation bar is that the placement is ideal for one-handed.
My immediate reaction upon landing on the site was to tap the lettering and this led me to the homepage, rather than opening the menu. Right after this, I tapped the hamburger menu and, this time led me to where I was looking for!
Conclusion
Overall, this website is visually pleasing and establishes a fun and bold tone, however, the site’s navigation is holding the site back. The desktop navigation handling is simple and intuitive to allow the user with an easy and fun experience. On the other hand, mobile navigation needs some fixing, but the initial idea and placement were perfect.
The major change to better the experience would be to add the two most important links (whatever they may be) to the left and right of the lettering. As for the hamburger menu, it will store the rest of the pages that have been left out in the middle. This will allow the user to quickly change to the home page and the two other important pages for the site while still using the hamburger as a menu for storage for the overflow pages.
This is the type of experimentation that genuinely puts a smile on my face. I can see this style of the menu bar for mobile menus being frequently used, but we need to break the idea that the hamburger menu needs to hold the navigation menu to further this idea.
