OpenTracks
OpenTracks copied to clipboard
OpenTracksApp
Feedback UI: Menu Bar
in the following: menu = the bottom part with statistics, pre-load GPS location, 3-dot-menu-opener
Icon Size I feel the current icons in the menu bar at the bottom are a little too small. This may be a result of the menu bar being a little too slim as well... Increasing the height of the menu bar ever so slightly would allow for slightly larger icons. Further more the spacing between those icons, should the menu bar be used as a navigation bar, the icons could be stretched / spread across the full available width (not screen width, but width available from left edge to short of record button)
App Logo The App Logo is being highlighted in bright orange signalling to the user they can interact with it as it may be a button. Especially since it is located directly next to interactive elements (statistics, start location service, menu) this isn't ideal.
Menu reorganization There are several ways one could reorganize the menu. Goal would be to keep the app logo and make it interactive, so that there's function behind it.
Alternative 1: getting rid of the colour of the menu bar entirely. admittedly (after a night of sleep) this isn't my preferred solution. Thought behind it: have to interactive buttons at the bottom: record button, app logo. The record button at its current position, possibly a little bigger, but not necessarily. The App Logo on the left, slightly smaller than the record button. When touching the app logo the menu items then could slide out to the right.
Advantage: very clean
Disadvantage: extra button presses for statistics and pre-load GPS position
very quick and dirty sketch:
Alternative 2: repurpose the app logo as the 3-dot-menu-button, spread logo, statistics, pre-locate button evenly across menu bar, have the logo ever so slightly larger than the other two buttons.
Advantage: cleans up menu bar, keeps statistics and pre-load-GPS-location one-tap-accessible. Disadvantage: contrary to my statement above, there is a chance it may not be 100% clear the logo is a drop down menu, through which the settings and other functions can be accessed.
quick and dirty mock-up, (icons here ended up quite a bit too large)
personally, and after having a sleep over it, I do prefer the second idea, as it keeps the current UI design pretty much untouched (and it a pretty good design!)
edit: Oh, on a side note, adjusting the menu bar colour to the splash screen grey (or vice versa, personally, I'm not a big fan of combining orange and green though, which is why I would adjust the menu bar's colour rather than the splash screen)
The three dots are practically a hamburger menu. I can understand, though, if you don't want to hide stuff behind the logo and rather have the added icon in the menu bar and I agree this would still work perfectly fine! In this case a hamburger icon might be better than the three dots, though. And if you're talking about the appearance of the context menu (search, settings etc) I don't think that would be necessary.
If you decide for the hamburger in the menu bar you could even move the record button to the middle to satisfy left and right handed single hand use, with the pre locate and hamburger button on the right, statistics and the logo on the left.
All of this wouldn't solve the problem of the logo being bright orange and not being interactive. Obviously you could make it link to the About / - Info screen, but from experience I hit that lower left corner way too often by accident. Question is, whether it is a problem. I know I mistook the logo for a button, but one data point is practically no data point. If others could just say report whether they too tried to tap it with certain expectations or not we could evaluate that better. As I said, I'm not an expert and professional UI / UIX designer so I might be wrong all along :'D
On another note: I just realized that the icons (just on the main page) aren't spaced out evenly.... The logo has roughly 37px(+-1) left and right, while the pre-locate one has 57(+-1) to the left and right... I did adjust it (using a screenshot), measurements (+/-1px) are included) and I do like it a lot better already.... maybe this was the main thing that was - unconsciously - throwing me off a bit, not sure... I don't suggest the margins to be pixel perfect identical, just roughly in the same magnitudes.
I would still suggest having the icons a tiny bit larger, though.
I think it's not a good idea to add a contextual menu on Logo Icon. User doesn't expect contextual menu on Logo Icons. According to Material Design documents, contextual menus should be indicated through: burger menu, three dots or an arrow:
In theses three icons it's clear for the user that there is a contextual menu.
that makes sense, yeah. I would probably go for the hamburger then, as it has roughly the same footprint as the other two icons