<html><head><style type="text/css"><!-- DIV {margin:0px;} --></style></head><body><div style="font-family:times new roman, new york, times, serif;font-size:12pt"><div style="font-family: times new roman,new york,times,serif; font-size: 12pt;"><div style="font-family: times new roman,new york,times,serif; font-size: 12pt;">Dani<br><br>We're attempting to put together a usability team and a user centered design process.<br><br>Would you be interested in working with us and our findings?<br><br>You have a good eye and I like the input you've provided.<br><br>Carla White<br><br><div><span class="gmail_quote">On 9/23/07, <b class="gmail_sendername">Dani Anon</b> &lt;<a rel="nofollow" ymailto="mailto:mrtitor@gmail.com" target="_blank" href="mailto:mrtitor@gmail.com">mrtitor@gmail.com</a>&gt; wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">

Hi<br><br>I was thinking on getting an openmoko when it's done and probably<br>developing a couple of apps but before that I think there is a big<br>problem with the current graphic design so I thought I'd contribute a

<br>mockup and some thoughts. If such contributions are welcome I'd be<br>willing to mockup the remaining interface elements under CC free for<br>any usage. Note that I don't have an openmoko yet so I just took an

<br>screenshot of the website (the one I found to be more complete<br>widget-wise) and remade it. You can see both here in this png I've<br>uploaded to imageshack:<br>It's work in progress, I didn't bother to do the full reflection

<br>treatment to the icons, and the little ideograms are pretty poorly<br>done, a lot of other things also need to be fixed, but it's enough to<br>get us started:<br><br><a rel="nofollow" target="_blank" href="http://img442.imageshack.us/img442/4728/ommockupexportaf2.png">

http://img442.imageshack.us/img442/4728/ommockupexportaf2.png</a><br><br>Now some comments about the differences:<br><br>- The current design has too many different styles all over the<br>interface, there are a lot of different backgrounds, styles of

<br>buttons, sliders, etc. In my proposal there's only one background<br>(that gray gradient bitmap) that is used in every "input area". For<br>background as the "content area" I use simply white, and the only

<br>exception is the black status area on top with the notification icons.<br>Using less bitmaps not only gives you a better looking design but it<br>simplifies development and theming, this is very important.<br><br>- You are using non-white colors for background of the content areas,

<br>which gives you a text contrast of 80%. This is no good, as a mobile<br>device is commonly used outside and visibility (contrast) is no good<br>to start with, so we shouldn't have anything less than 100% contrast<br>

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.

<br><br>- I understand that you are using the same non-gray color through the<br>interface (orange) to get some coherence. This can be a good idea to<br>avoid making bad color choices but we can do better and get:<br> a) better usability. using different colors for different categories

<br>of things is a universal and accepted way of improving usability<br>(think of traffic lights and signals). You shouldn't avoid this<br>resource.<br> b) better experience. The same color all over the interface can get

<br>boring quickly!<br><br>- Keyboard layout. You are wasting space right know, the same keyboard<br>can be arranged to take advantage of 100% of the width of the screen.<br>The new layout gives you 20% more horizontal space resulting in more

<br>accuracy. I'm not sure at all about having backspace and enter in that<br>place, that particular detail is just the first thing I came up with.<br><br>- 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.

<br><br>- My key buttons are now language agnostic, "del" has been replaced by<br>just the backspace symbol and "enter" has been replaced by the enter<br>symbol. The color of the buttons provide another clue about the

<br>function. This way the same bitmaps can be used in any language<br>configuration.<br><br>- (strictly design problem) I didn't like the horizontal gradient on<br>top, really took my attention toward the left, I felt it was a

<br>problem.<br><br>- The proposed layout of the keyboard is more similar to a real<br>keyboard, in the current design Z is right on top of S for example.<br>There is space at the right of L that could be used for an ntilde (Ñ)

<br>for spanish speakers or a cedilla (Ç) for french speakers depending on<br>the configuration.<br><br>- You didn't need to surround the clock on top by a border, the format<br>XX:XX is easily recognizable already as an independent item, and by

<br>removing the border you can have a bigger font size that makes it easy<br>to read.<br><br>- Speaking of font sizes notice how by removing unnecessary elements<br>now I have bigger font sizes everywhere that make everything easier to

<br>read.<br><br>- The orange glow to indicate selection of an item: it's a cool idea,<br>but unfortunately there's little contrast between orange and white<br>(remember this is a cellphone so we need a lot of contrast). Contrast

<br>between yellow and black is 65%, contrast between the current orange<br>and white is 43%. Contrast between a selected cell and the cells above<br>and below also helps, that's why I've removed the glow. A plus about

<br>yellow is that it is intuitively recognized as the most used color to<br>highlight stuff. Contrast figures are approximate since I don't know<br>the gamma values of the device in question.<br><br>- Since I don't have an openmoko yet I didnt know what the area on the

bottom of the screen&nbsp;&nbsp;(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.

<br><br>That's all, and excuse my English, I have work to do so I really don't<br>have time to proofread me. And btw, about the physical design of the<br>device, obviously it can also be improved, so when you start the next

<br>neo it would be great if you told the community so we can contribute<br>ideas. And props for the project, as this was very much needed.<br><br>Dani<br><br>_______________________________________________<br>OpenMoko community mailing list

<br><a rel="nofollow" ymailto="mailto:community@lists.openmoko.org" target="_blank" href="mailto:community@lists.openmoko.org">community@lists.openmoko.org</a><br><a rel="nofollow" target="_blank" href="http://lists.openmoko.org/mailman/listinfo/community">http://lists.openmoko.org/mailman/listinfo/community</a><br></blockquote>

</div><br>

</div><br></div></div><br>

      <hr size=1>Boardwalk for $500? In 2007? Ha! <br><a href="http://us.rd.yahoo.com/evt=48223/*http://get.games.yahoo.com/proddesc?gamekey=monopolyherenow">Play Monopoly Here and Now</a> (it's updated for today's economy) at Yahoo! Games.</body></html>