interface design suggestions

[london cowgirl]

Dani

We're attempting to put together a usability team and a user centered design process.

Would you be interested in working with us and our findings?

You have a good eye and I like the input you've provided.

Carla White

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










       
____________________________________________________________________________________
Take the Internet to Go: Yahoo!Go puts the Internet in your pocket: mail, news, photos & more. 
http://mobile.yahoo.com/go?refer=1GNXIC
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.openmoko.org/pipermail/community/attachments/20071015/5db3c985/attachment.htm