Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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 before recording

The Whiteboard While Recording

The whiteboard while recording.

One Of Many Forms In The App

One of Many Forms In The App

The Landing Page

The Landing Page

What It Looks Like When All Four Thumbnails Are Used

What It Looks Like When All Four Thumbnails Are Used

share|improve this question
    
What does the writing tool do? –  Erics Dec 26 '13 at 5:00
2  
Just a quick note: UX is not about beauty (that's visual design, more for graphicdesign.stackexchange.com than this site). I've seen really easy-to-use systems which looked hideous. A good UX question in this case would be to ask "Is this really intuitive?" And the way to do it is to ask multiple people on what do they believe the icons do and how to use the application in general. Look at this for example: youtube.com/watch?v=9wQkLthhHKA –  Aadaam Dec 26 '13 at 12:06
1  
You know what? This is a pretty good toolbar design. Rather unique, actually. The functional sections are visually distinct and I think that makes it quite usable. So, anyways, you did really good for a start there. –  DA01 Dec 26 '13 at 17:00
    
@DA01 Thanks: I really appreciate it. Do you think the same of the new design? –  Sam Ballantyne Jan 4 at 17:07
    
@Aadaam Thanks for the advice. That's a brilliant video. My target audience is middle-aged college professors, so I look forward to conducting similar interviews. –  Sam Ballantyne Jan 4 at 17:09

7 Answers 7

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.
enter image description here

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.
    enter image description here
  4. Use informal, sketchy icon for image adding, like showed:
    enter image description here
share|improve this answer
    
These are great line stroke buttons. I've just been making mine in pixelmator - how did you get your stroke like that? –  Sam Ballantyne Jan 4 at 17:10
    
@SamBallantyne, I've applied pressure profile to the lines to make "sketchy" look and feel. My tool is Xara Designer. –  Alexey Kolchenko Jan 4 at 22:12
    
@SamBallantyne, I like you design! Please watch update section. –  Alexey Kolchenko Jan 6 at 11:50

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.

drawing app

share|improve this answer
    
It was important to me that there only be one menu. Do you like the new one better? –  Sam Ballantyne Jan 4 at 17:11
    
I guess by "menu" you mean what I would call a "control bar". Why is it important to put all the functionality in a single control bar? Is it a goal for you, as a developer, or are you honestly thinking about what's best for your users? Fewer clicks can be a good thing, but not at the expense of making things cluttered and harder to understand when learning to use the app. Having a bit of "dead space" will make it easier for users to visually parse all the controls when looking at it. –  kwahn Jan 6 at 14:23

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

enter image description here

enter image description here

share|improve this answer
    
I just tried to find the icon you mentioned. Is there a rep requirement? Could you post a screenshot? –  Sam Ballantyne Dec 25 '13 at 23:19
    
@SamBallantyne It may be a reputation thing. So I've added images as per of your request. –  Benny Skogberg MCSA Dec 26 '13 at 6:53
    
Thanks. I'm trying to create something much simpler to use: since users can video record their voice and drawing, I thought it was important that everything just be one tap away. As a result, I've had to limit features pretty severely. –  Sam Ballantyne Jan 4 at 17:13

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?
share|improve this answer
    
I've post an update which hopefully answers some of these. tldr: The app lets people record videos of them drawing and talking: it's a chalk-and-talk education app. –  Sam Ballantyne Jan 4 at 17:16

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 has experienced till now, is a so expensive deal.

share|improve this answer
    
Everything in the line at the top (from "iPad" across to "99%" and the battery indicator) is standard iPad and appears in every iPad app, with slight variations. –  Andrew Leach Dec 26 '13 at 9:01
    
I've post an update which may answer your question... –  Sam Ballantyne Jan 4 at 17:22

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.

share|improve this answer
    
That's a good point. When you add a fourth thumbnail, the 'add' button disappears. You can flick away unwanted thumbnails to get a new screen, also. I've never had a problem with the color thumbnails - most people are using styli, which might be the reason. –  Sam Ballantyne Jan 4 at 17:14

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!

share|improve this answer
    
This was really helpful. What do you think of the new design? –  Sam Ballantyne Jan 5 at 19:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.