Hi I was thinking on getting an openmoko when it's done and probably developing a couple of apps but before that I think there is a big problem with the current graphic design so I thought I'd contribute a mockup and some thoughts. If such contributions are welcome I'd be willing to mockup the remaining interface elements under CC free for any usage. Note that I don't have an openmoko yet so I just took an screenshot of the website (the one I found to be more complete widget-wise) and remade it. You can see both here in this png I've uploaded to imageshack: It's work in progress, I didn't bother to do the full reflection treatment to the icons, and the little ideograms are pretty poorly done, a lot of other things also need to be fixed, but it's enough to get us started:
http://img442.imageshack.us/img442/4728/ommockupexportaf2.png Now some comments about the differences: - The current design has too many different styles all over the interface, there are a lot of different backgrounds, styles of buttons, sliders, etc. In my proposal there's only one background (that gray gradient bitmap) that is used in every "input area". For background as the "content area" I use simply white, and the only exception is the black status area on top with the notification icons. Using less bitmaps not only gives you a better looking design but it simplifies development and theming, this is very important. - You are using non-white colors for background of the content areas, which gives you a text contrast of 80%. This is no good, as a mobile device is commonly used outside and visibility (contrast) is no good to start with, so we shouldn't have anything less than 100% contrast for variable content, i.e: black over white or white over black. Things that the user is familiar with like symbols and titles of programs and headers are ok not having 100% contrast since the user already knows the captions. - I understand that you are using the same non-gray color through the interface (orange) to get some coherence. This can be a good idea to avoid making bad color choices but we can do better and get: a) better usability. using different colors for different categories of things is a universal and accepted way of improving usability (think of traffic lights and signals). You shouldn't avoid this resource. b) better experience. The same color all over the interface can get boring quickly! - Keyboard layout. You are wasting space right know, the same keyboard can be arranged to take advantage of 100% of the width of the screen. The new layout gives you 20% more horizontal space resulting in more accuracy. I'm not sure at all about having backspace and enter in that place, that particular detail is just the first thing I came up with. - You have a lot of padding and margin where you don't need it. As a result of removing those unnecessary details I have saved a lot of space. Yes, padding and margin is good wherever we have an interactive button that would need to be pushed, to avoid errors, but we really don't need it for non interactive items if we design properly. - My key buttons are now language agnostic, "del" has been replaced by just the backspace symbol and "enter" has been replaced by the enter symbol. The color of the buttons provide another clue about the function. This way the same bitmaps can be used in any language configuration. - (strictly design problem) I didn't like the horizontal gradient on top, really took my attention toward the left, I felt it was a problem. - The proposed layout of the keyboard is more similar to a real keyboard, in the current design Z is right on top of S for example. There is space at the right of L that could be used for an ntilde (Ñ) for spanish speakers or a cedilla (Ç) for french speakers depending on the configuration. - You didn't need to surround the clock on top by a border, the format XX:XX is easily recognizable already as an independent item, and by removing the border you can have a bigger font size that makes it easy to read. - Speaking of font sizes notice how by removing unnecessary elements now I have bigger font sizes everywhere that make everything easier to read. - The orange glow to indicate selection of an item: it's a cool idea, but unfortunately there's little contrast between orange and white (remember this is a cellphone so we need a lot of contrast). Contrast between yellow and black is 65%, contrast between the current orange and white is 43%. Contrast between a selected cell and the cells above and below also helps, that's why I've removed the glow. A plus about yellow is that it is intuitively recognized as the most used color to highlight stuff. Contrast figures are approximate since I don't know the gamma values of the device in question. - Since I don't have an openmoko yet I didnt know what the area on the bottom of the screen (I think it must be a read only buffer) is for so I haven't mockuped it. - Also I don't know what's the thing at the right of the search button so I didn't include it. That's all, and excuse my English, I have work to do so I really don't have time to proofread me. And btw, about the physical design of the device, obviously it can also be improved, so when you start the next neo it would be great if you told the community so we can contribute ideas. And props for the project, as this was very much needed. Dani _______________________________________________ OpenMoko community mailing list [email protected] http://lists.openmoko.org/mailman/listinfo/community
