★ TouchArcade needs your help. Click here to support us on Patreon.

Is it ok to leave the beaten path with regards to UI/UX?

07-31-2015, 08:03 PM
#1
Joined: Jun 2011
Posts: 602
Is it ok to leave the beaten path with regards to UI/UX?

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.

Last edited by Scorpion008; 08-01-2015 at 08:32 AM.
07-31-2015, 11:27 PM
#2
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.

08-01-2015, 01:03 AM
#3
Joined: Aug 2013
Posts: 1,065
Quote:
Originally Posted by SpiritBomb Studios View Post
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.
I agree
+1

Please follow me on twitter @JamesDestined I post lots of development from both my game creation and professional development.
Time to measure - Brain challenge https://itunes.apple.com/us/app/time...820864672?mt=8
The light box, can you solve it (free) (on google play too)
https://itunes.apple.com/us/app/the-...6300?ls=1&mt=8
08-01-2015, 07:05 AM
#4
Joined: Jun 2011
Posts: 602
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!
08-01-2015, 07:37 AM
#5
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...

Currently working on a number puzzle: TALLNUM (TL№) and a rogue-like adventure korikori.co follow me on Twitter: @takemuraori.
08-01-2015, 08:12 AM
#6
Joined: Jun 2011
Posts: 602
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.


Quote:
Originally Posted by takemuraori View Post
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...
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

Last edited by Scorpion008; 08-01-2015 at 08:31 AM. Reason: More information added at end
08-01-2015, 05:45 PM
#7
Joined: Jun 2011
Posts: 602
Hey guys, still looking for advice. I added some more info to the last post.
08-01-2015, 11:24 PM
#8
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.

Currently working on a number puzzle: TALLNUM (TL№) and a rogue-like adventure korikori.co follow me on Twitter: @takemuraori.
08-01-2015, 11:29 PM
#9
by the way - why do you post this in public game development forum?

Currently working on a number puzzle: TALLNUM (TL№) and a rogue-like adventure korikori.co follow me on Twitter: @takemuraori.
08-02-2015, 04:25 PM
#10
Joined: Aug 2013
Posts: 1,065
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.

Please follow me on twitter @JamesDestined I post lots of development from both my game creation and professional development.
Time to measure - Brain challenge https://itunes.apple.com/us/app/time...820864672?mt=8
The light box, can you solve it (free) (on google play too)
https://itunes.apple.com/us/app/the-...6300?ls=1&mt=8