Recently, working on my new ipad app synthmate, the most interesting part has been reflecting on the progress of the app’s ui/ux and learning from what elements stayed and what elements changed from my initial design/ideas.
Wireframes or mock-ups were done using flash. I like using flash because i know it and i like the way you create objects inside other objects. I can easily switch between assets and generally work fast and am able to constantly tweak. The assets i used were grabbed off the web and screen shots of the ipad simulator. I should say i also don’t like flash for numerous reasons but i won’t go into them here.
Here’s my first mock-up
Some of the things i didn’t like about this first draft were :
- duplication of the keyboard image. i felt user’s would probably get confused between 2 pop-overs looking very similar. I tried to put scale and scope together (below) but i felt there was now too much for the user to work with.
- I liked the idea of making rotating controls and had a nice looking image BUT i made one and it was terrible. I soon realised that trying to simulate “real world” controls on a “virtual world” device is often a gimmick and not very user friendly. I knew this from using many applications including digital mixing desks for live audio and now that i had made one, i understood why they don’t work. So, i went for a more modest slider control, apple’s built-in one. I dressed it up to blend in with the other controls and set the thumb and slider size to both be large enough for a finger to touch and to also show the min and max.
- I felt the green ✓’s and red ✗’s were over-kill. Very busy. The more i thought about it the more i realised that in fact what i was trying to show was not a keyboard at all. For those musicians out there, setting the scale keyboard to say D Major and then setting the Root note to say E would mean you would be playing E Major. Very confusing. To solve this, i came up with what i was really trying to represent; the notes within ANY scale. The solution was so simple and it also meant i now only had 1 keyboard image, representing the Root note.
- The control surface is a whole other post. I’ll edit the screen capture movies into a quick history of its development.
I love my mock-ups. They help me see what my app is going to do. And it separates writing code and designing ui/ux. Of coarse it’s hard to separate from writing code and there are always tweaks to be made. I find having a good clear idea makes writing the code a lot more fun because it’s satisfying to achieve what you set out to achieve. WIthout a plan or a rough idea of something can also be fun, with some lovely results. But it doesn’t always work.