Matt Legend Gemmell Modesty is Lying

Mac OS X Cocoa and iPhone Development Services available at Instinctive Code.
Favorites icon
Favorites for iPhone
Speed-dial with style.
Mac OS X Cocoa and iPhone Developer for hire

Other Pages

Categories

Posted
27 October 2005 @ 7pm

Categories
Development, Interface

Tags
, , , , ,

UI feedback request

Feedback solicited on an application UI mockup.

When I was recently working on an icon which represented the concept of UI design, I had an idea for an OS X application. It seemed to me that there’s a hole in the developer tools in terms of icon design; they don’t include a tool to help with the assembly of icons for our applications, IconComposer etc notwithstanding. Ergo, I’ve been designing an app to help with that task.

It’s important to note that this is not a general-purpose image editor. The target market for the app is Mac OS X developers (Cocoa, Carbon, AppleScript Studio, REALbasic and so on) who want to create or assemble icons for their own software, in a few standard styles: application icons, document icons, plugin icons, and possibly some others like icons for disk images and so on. The presumption is that these people can’t afford to hire a professional design house, or don’t want to for some reason, and that the types of icons they need are relatively standard.

The basic workflow is that, upon creating a new document, the user will be asked which type of icon they want to create, from a list with mini-previews of each type. They will then be shown the document window, which you can see here. (Here’s a full-size version.)

When an Icon Element is selected on the left, you can see a description of it in the pane below, much like in Automator. Double-clicking an Icon Element, or dragging it into the canvas in the center of the window, will cause it to be added to the icon. All of the current Icon Elements are shown in topmost-first order in the Layers list on the right. The drawer displays appropriate controls for configuring the selected Layer. Finally, there are some controls below the canvas for determining how the icon preview is displayed; the Canvas Background color is for display purposes only, since icons will naturally be exported with transparent backgrounds.

There will likely be more Icon Elements than are shown in the screenshot, and those ones are just for application icons; different Icon Elements will be present for other icon types (such as Page Curl and File Extension Text for document icons, and so on). Likewise, there may be more options than are shown for the “Document Page” Icon Element; I’m not asking for feedback on those aspects.

What I’m interested in is general feedback on the UI and the app concept. I’m particularly interested in your thoughts on the following areas:

  1. Should there be a more explicit way to add an Icon Element to the canvas, in addition to double-clicking or dragging?
  2. Saving the document will save in a custom format which can be reopened and edited again later, naturally, but users will be more focused on saving icon graphics (PNGs, TIFFs, or whatever). Is it sufficient to simply offer an Export command in the File menu, or does this need to be made more obvious in the UI?
  3. Does any of the terminology strike you as awkward or inappropriate? E.g. “Icon Elements”, “Layers”, and so on.

General thoughts and feedback will of course also be gratefully received. As a technical side-note, I’ve done a few technology experimentations with using Core Image for compositing, perspective distortion and such, and it rocks. The app will use Core Image, and will thus be Tiger-or-later only. Lastly, any suggestions as to what to call the thing would be handy.


3 Comments

kiro
27 October 2005 @ 8pm

All I can say is….Wow


Chris Miller
28 October 2005 @ 11am

Nice idea for an application. Right, here goes:

1. How much more explicit can you get, you grab the “Icon Element” and drag it on - Q.E.D.

2. I shouldn’t think that exporting to be an obvious inclusion, as long as it is clearly available in the menu system with a nifty shortcut (I suggest Cmd+Shift+E).

3. Nah, go with it - perhaps have a look at other icon drawing packages to see what they use? Most people seem to get on well with layering terminology and icon elements is pretty self-explanitory.

I’d assume that when you’re saving out the completed icon to your filetype, that the icon for that file will be the actual icon itself rather than an icon for the filetype. Doing this allows you to grab the icon image off the icon itself with out having to use tools such as Pic2Icon.

Names:
XIcon (to tie in with XCode)
DevelopIcon - The Developers Icon Creation Tool
IconEdit / EditIcon - Simple, obvious, probably used by a shitload of icon editors though
Composicon - My favourite by far

Erm, I can’t think of any more. Hope this helps.

- Chris


Uli Kusterer
30 October 2005 @ 11am

A few thoughts:

1) Terminology: While “Layers” and “Icon Elements” as standalone terms work, I think as a pair in the window they don’t work well. Since they’re symmetrically placed, they look more like two lists of things you can put on the page, than what you can drop and what has been dropped. Have you thought about maybe going more for a “Clip Art” vs. “Placed Elements” distinction? I’m sure someone who’s English and didn’t just get out of bed will have a better idea for the actual terms, but that’s my $0.02 on that.

2) Intuitiveness: I don’t think a source list indicates draggability enough. usually source lists are used for selecting stuff, i.e. they work like tab controls to select what is shown in a pane next to them. You might want to make that a regular list or maybe something like a Finder Icon View or so.

3) Inspiration: Have you checked out plasq’s “Comic Life” yet? I think their idea of an area full of little template images might be even more intuitive.

4) Name: There used to be an app called “Iconder” for System 7 — always kinda liked that name. Also coming to mind: “Patchwork”, “SlapItOn”, “IconBuilder” (probably overused), DIcon, IconFactory (you’d have to negotiate with the web site for that)… but that’s just brainstorming.


Leave a Comment

Yearcore Erectile Dysfunction