I am currently working on an app that I have created custom UI elements for almost ever part of, including the tab bar, radio buttons, navigation bar, segment selectors, on/off buttons, and time pickers (as well as using custom fonts, unusual tableview applications, non-apple button and text tints, and replacing most words with icons). I did this to try to get as clean and (originally) flat a look as possible. However I am now worried that I might have made too flat, un-apple (nearly android actually), unintuitive (icons instead of words), and altogether too far from the beaten path app that I am worried it will not appeal to customers. In my mind, it will either be a love it or hate it reaction form most customers and I am becoming more and more worried which one it will be. Do I sound crazy? I'd post screenshots but I am worried that bad things might happen if I do (I'm a bit of a cynic) so PM me for images. If there is a (even a small) consensus that I need to post photos for you to be able to help me I will though. EDIT: POSTED SCREENSHOTS BELOW. Also I'd love to join the dev forum even though I haven't put anything out yet as I still think it would be a great place to learn and ask for advice.
No one's gonna PM you to ask for the screenshots. Just upload them here then we'll talk. One important thing about UI/UX design is that it must be easy to understand and use. If you make your users think too much or try too many times just to navigate through your screens then you'll fail.
Ok, you talked me into it. Main Screen, a tableview and a graph: Again with a third task: New task/editing task screen: Same screen with keyboard up: Time setter, two options: go until stopped and timed: Task notifications options: Graph of amount of time not wasted: Upgrade screen, where I plan to make the money: General settings, like notifications for when no task is selected and redo options: Thank you for any feedback you can share with me!
UX - Flatness of UI is fine, iconography however is confusing. Play button what does it do - does it save the task? You have CTA on top with confirm cancel but also 3 CTA on the bottom, hierarchy is broken I think. - First screen, what are those blobs on the left from two first tasks, they look radio buttons.. UI "Time usage efficiency" screen is not visually consistent with the rest. My opinion: currently visually is ok, could be better but i like the direction, UX is messy...
Edit: For what it's worth (and I hope I'm not breaking any rules here) I would be happy do give anyone who can give me advice here a copy of the app for free when it comes out. I am learning a lot and I am super grateful to you guys for all the help you can give me. The play button is a tab bar button, you would hit it to switch to that view, after you are there hitting it wont do anything. The checkmark in the top saves the task. I want to do a tutorial first round to explain show the various functions so I just need the icons to remind people what the functions are after they were explicitly introduced once. The "blobs" are basically just there to show task color, they were originally rounded squares, but I thought the ring shape looked better as it matched the circle graph. It is also a unicode character as that is the easiest kind to use in a table view. Could you please elaborate on what is visually inconsistent in the graph screen? Mode picker, having a lighter color in the graph, axis labels, etc? Lastly, you said the UI was good, not great. Could you give me some tips for what would look great? I have been considering using slightly 2d shaped for clickables like this: Thank you for your input! Edit: Also, I should have mentioned, the colors you see (except in the red/green nav bar buttons) vary according to the color of the selected task. This is my color scheme: Solid color icon: selected button/tab item Outline color icon: not selected button Solid grey icon: not selected tab item Color text: important text Gray text: secondary importance
Ok here you go with some more of my notes: UX - think about it, [close] / [save] are highest priority CTA because they are contextual (user doing something right this moment that directly related to them - because he will save a task or cancel) = thus move them down - or because you don't want them to get overplayed by keyboard keep them there but hide bottom cta, and make Save/Cancel easier to tap. - hide unnecessary UI whenever it is irrelevant, - in New task/editing task screen - are bottom elements relevant? - Ux should be nailed to the point that you would not need tutorial to explain how that thing works. UI - you use same visual language for radio buttons and "The "blobs" are basically just there to show task color" / change one of those elements to be distinguishable, align blobs to the left or consider different alignment in the tasks. - blog and "infinite" are same group of UI, what does infinite indicate? - Graph stands out because you use border color with thickness over histogram points that is never used in your design = you never outline elements, yet suddenly it is there. - 2d shaped is a nice touch. - Ui would benefit from composition improvement, weight of the elements per screen, priority of information flow. Typography can be not so utilitarian.
The flat buttons is now standard thanks to Apple. Nothing off the beaten path about that. It all looks adequate/functional to me although it doesn't attract me to wanting to use it.
Well, I have been banging my head against a wall trying to redesign my UI, both in color palette, layout, button design, etc., basically everything. Here is the new home page. The rest will follow suit if you guys think this turned out well. Thoughts?
Thanks for this super info dump, I've been rereading it several times trying to visualize the changes I need to make. I think I may get rid of the tab bars all together, I have an idea for that, making a scrollview with three dropdown buttons (for the second tab bar, for the first I will break up the pages and only link each page to one function each, streamlining and simplifying). Also, going to have big red/green cancel/done buttons at the bottom of the pages. (Btw, I did make the original buttons easy to tap, the tab targets were invisible and huge, but the buttons didn't stand out enough so thats why I'm changing the layout). Got rid of blobs, and infinite was written to show which task was selected in the case where it was selected for infinite time, if it was selected for a timed amount, a countdown timer was shown. Should I have a line only graph? Can I reasonably get rid of any other parts of the graph like axis, scale, x/y labels? I like my font, it's not too basic but it looks kind of fun, flat, and elegant. It is a little thin though. What do you think I should do that is less utilitarian? I don't want fancy stuff because it draws away from the theme.
The previous design is much easier on the eye. The green is a pretty horrible choice of background colour especially when you have a different shade of green button.
Is it only the green on green clashes that you don't like? What else is bad about the new design? Is the new card system better? the multidimensionality? The color vs. pure white? The 3d buttons? Is it all worse? Also, three backgrounds I tested: Diagonal gradient, partly transparent over black. Color changes with relevant user actions so it will always get switched up. Grey: A blue I cooked up to be the same sort of color as the old green without being green:
Any thoughts on the new layout vs old AND separate thoughts on the backgrounds of the last three I posted?
Overall, I think the design looks nice and quite easy to understand. I don't see anything too strange or too different like you said in the original post Keep up the good work
Could you please specify which version you are referring too? Or both? Also, and I'm posing this to anyone, the million dollar question. Does what you see draw you to download the app knowing nothing else? I think the functionality is good, but based on interface alone, would it an insta-(free)download?
OK, MUCH work later and I have the new iteration. New task screen: New set time screen: New three tier but one page settings screen: The interface is now simpler than ever, with NO tab bars and each screen's segue attached to the most obvious function. (i.e., settings button, new task button, selecting task from tableview). Background is grey for the time being but it is super easy to customize. Graph is simplified, notification options are simplified, buttons are now blue, green, or red, and colour coded to what makes the most sense (red is cancel/back, green go/done, blue neutral). Font is size 28pt EVERYWHERE and the font color is either off-white (#EEEEEE) on navy or vice versa. All in all, this gives me easy to read text, smooth flow of use, high contrast, 3d (easy to notice) buttons, and a simple color palette while getting rid of the super-whiteness of the original. Do you have any more suggestions?
