interface design suggestions

[Dylan McCall]

I really like what you have done with the bar at the top. I, too, hate the
gradient, and the coloured logo is a fine alternative. Excellent thinking
with the keyboard, too.
A lot of the other trouble has been addressed in the redesign, but you have
a good eye for this stuff. I look forward to seeing you pull apart 2007.2!

Bye,
-Dylan McCall

On 9/23/07, Dani Anon <mrtitor at gmail.com> wrote:
>
> 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
> community at lists.openmoko.org
> http://lists.openmoko.org/mailman/listinfo/community
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.openmoko.org/pipermail/community/attachments/20070923/b4e0ef00/attachment.htm