What's wrong with this picture?

Question

Context

I'm a developer (not a designer) working on a drawing app, and I'm a little clueless about ui / ux design. The functionality is there, but something is really wrong with the look of the menu bar. It's hideous. Any thoughts, dear internet?

I think it's intuitive but ugly. How do I fix that?

---

Update 1: some information about the icons

• the image icon controls adding an image to the screen
• the colors set the drawing color
• the thumbnails lets you switch between 'pages'
• the plus icon adds a page
• the record button controls starting and stopping recording

---

Update 2: A New User Interface

Some quick other info: I was amazed by the feedback! This in an incredible community. I incorporated as many of the notes from this page as I could. The app lets users make short, instructional videos on their iPad: I've been building it over the past 6 months as I taught myself to code. It was important to me that every change (pen color, line width, eraser, different screen, new screen, record, etc) be just one tap away. Right now, the only thing that fails that test is the 'add an image' button.

What's the verdict on the new look?

Sam

The Whiteboard While Not Recording

The Whiteboard While Recording

One Of Many Forms In The App

The Landing Page

What It Looks Like When All Four Thumbnails Are Used

Answer 1

I think some styling improvements could be made.

It feels like there are mixed formal and informal styles in the interface. Icons are too abstract and angled, which creates formal mood. This style is too official and probably not best choice in your case.

Curved controls looks more sketchy and user friendly. Benny Skogberg showed style of the Balsamic. It has real sketching mood.

UPDATE
Nice and simple design!

Still, you could improve the interface:

1. Replace delete button with undo one. Undo is important in teaching and recording mode, when it's important to fix an error as quick as possible. Undo is much quicker, than erase. KhanAcademy does it the same way.
2. Move Delete button close to page management area, where user can add, open, and delete a page.
3. Display whether playback is available for a page, see the red dot at the bottom of the page.
   
4. Use informal, sketchy icon for image adding, like showed:
   

Answer 2

I think organizationally, it's too cluttered. Grouping related items will help quite a bit. Not knowing the exact needs of your users, here are a couple options that I came up with. Just might give you some ideas...

1. Put actions in the upper right (Writing assistant, add image, and record)
2. Tools that affect drawing behavior at the bottom (line thickness and color)
3. Upper left will be navigation. Consider hiding drawings to a parent menu, if it's not very important to switch drawings quickly all the time.

Answer 3

What you see is a sketching tool to make mock ups. It doesn't look as other applications since the general idea is different. A sketching tool is very different from an Enterprise Resource Planning system or a developer tool such as Visual Studio.

Why one may wonder? The general idea is to draw sketches and mock ups too look like unfinished work. If a customer see a sketch they know it can easily be changed. We in the industry can tell that there is no difference changing a sketching app outcome with changing something designed in Photoshop. But the customer makes that very distinct difference. It is there to make the customer tell what they want since the design isn't finished.

That's why the toolbar looks so different from any other toolbar. Do make the distinction that this is a very different app with a very different purpose.

If you edit your post, you'll see a sketching icon to the right of the add image icon. Click it and see another application with a similar UI designed for the very same purpose - sketching

Answer 4

Back to the drawing board...

But first ask yourself:

• There are already plenty of sketching tools, what's my usp? In other words:
• Which problem is my app supposed to fix, exactly?
• For whom?
• Did others attempt to fix the same problem. If yes: how?
• Why did I put the menu bar on top? Why not left, right, bottom,
  floating or hidden?
• Does the menu bar need to look the same as the device status bar?
• For that matter: why did I make the menu bar gray?
• Do those buttons and icons need to be in that order?
• Did I check if the meaning of the icons is clear?
• Won't users need an undo button?

Answer 5

I noticed you're developing this for an iPad. If that is the case, I don't see users having small enough fingers to hit those individual colors or stroke weights.

In an ideal UX world, less clicks is better. When it comes to touch-screens, it's a bit harder to aim with your finger than it is with your mouse (because once you touch it, you've clicked it, as opposed to a mouse where you can aim and then fire). For that reason, I would move the colors into an icon that activates a menu so the user can then select their color. Same for stroke weights.

In terms of the thumbnails, that design is not scalable, unless they can only have three pages at a time (which is probably not the case because you have "Plus Sign" there to add more pages). What will happen when there are 6 pages?

Beyond that, I think the choice of icons are intuitive and I think Alexey Kolchenko made some good points.

I'm sorry for giving you more "things to think about" than an actual solution. UX design usually takes iterations.

Answer 6

Let's get some actionable constructive criticism in here. Some of the design recommendations are great, but difficult to take action on.

At the least, you should segment the different types of buttons. Colors should be boxed (or do something similar to Kwahn's mockup).

The gray background which melds into the top bar (time/battery/etc bar) looks pretty bad. Consider making the top bar differently colored, and not using grey for the toolbox.

The toolbox feels "thick". Try reducing its height and making all the tools use a similar height. Reduces the feel of wasted, ugly space.

The red button thing in the top right looks awful. Is that indicating your current color choice? And is that why the red color on the palette is bigger than the others? Lets combine the two and encircle the current color used on the palette, and remove the right button thing completely. Also, making the red bigger looks...inconsistent. The border should be plenty.

Speaking of the border, the black you're using is very strong. I think you could go a few shades lighter and not lose the "black" feel.

Hope this is a good starting point for you!

Answer 7

What is this app? What is it going to do? What are those triple images? What's that + for? Is the red circle an alert or notification? or maybe a sign-out button?

That's the main problem, to be unclear. I think that's a good idea to be creative, but making a very different application with what users have experienced till now, is a so expensive deal.