The Original Layout
I had to make some assumptions as to the purpose of this screen. Â Iâ€™m assuming the user clicked on one of their tasks and this is the task update screen. Â The previous Shot on Dribbble shows tips and encouragements, so Iâ€™m assuming thatâ€™s what â€œask for helpâ€ is all about. Â
The slider is gorgeous, but is it adjusting the timeframe (â€œnowâ€ versus â€œlaterâ€) or the completion percentage of the task? Â Is the checkbox for marking the task as complete?
Iâ€™ll do the layout
The header was a bit cluttered with an assortment of actions. Â If this is truly a task update screen, letâ€™s make it a normal Cancel/Save header. Â Of course, keep the custom button treatment.
We can keep the now/later indicator and the slider together. Â Â The slider is so beautiful, make it bigger! Â Â If that checkbox really is a â€œcompleteâ€ control, letâ€™s pull that out. Â The user should be excited to complete a task, so make it a big beautiful button that has a clear call-to-action. Â Additionally, have a help call-to-action.
The text at the bottom of the Shot was just helper text, right? Â If so, we can still tuck that at the bottom of the screen.