|Baby's first UI!|
|Aforementioned Sketch (not bad hey?)|
Mapping an application's behavioural flow is really important, especially when you have more than 1 or 2 screens. The user (and the developer!) need to know where they are, how they got there and how to navigate away.
I made my navigation based on buttons and menu items that take the user to different screens.
So, great right? I made the screen look like the sketch, but as I said, I did not really touch on the central part of the app, the timer. And also I did not really touch on the navigation properly. The timer (the most important part of the application) was a tiny 12dp bit of font lost in the running screen. I downloaded some libraries and went to work! I ended up with a pie-chart looking timer with a very visual countdown.
Another Issue was the navigation. There were buttons all over the place. I had them in the middle of the screen, at the top, and at the bottom. Very confusing. So I settled on a button bar that's unified on all the screens the user visits.
Users want to know what the time left is. And I want them to be wowed about the experience.
Now we are on to something! A few libraries and a few modifications and we've got ourselves a large countdown wheel with some other goodies. The button in the middle adds one hour, the time and the percentage of the wheel give good information to the user by either glancing at the app or taking a more detailed look.. But the button in the middle? and the appearance.. hmm.
Ok, well the rest of the app is using subtle shading throughout giving the appearance of overhead lighting and a bit of occlusion (look it up!), for example
|Shading in the rest of the app|
So after a few hours I made some subtle light changes to the timer.
The shading makes the time arc look like it's dug into the background slightly, blending the whole thing in a bit more with the rest of the app.. The key here is subtle. You can really easily go right over the top with this stuff and while you put a lot of effort in you can end up with an app that looks utterly horrid. While I wont provide examples of bad Apps, you can find plenty on your own in the play store. You've probably got a few installed!