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.<br>
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!<br>
<br>
Bye,<br>
-Dylan McCall<br><br><div><span class="gmail_quote">On 9/23/07, <b class="gmail_sendername">Dani Anon</b> &lt;<a 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&#39;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&#39;d contribute a
<br>mockup and some thoughts. If such contributions are welcome I&#39;d be<br>willing to mockup the remaining interface elements under CC free for<br>any usage. Note that I don&#39;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&#39;ve<br>uploaded to imageshack:<br>It&#39;s work in progress, I didn&#39;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&#39;s enough to<br>get us started:<br><br><a 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&#39;s only one background<br>(that gray gradient bitmap) that is used in every &quot;input area&quot;. For<br>background as the &quot;content area&quot; 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&#39;t have anything less than 100% contrast<br>
for variable content, i.e: black over white or white over black.<br>Things that the user is familiar with like symbols and titles of<br>programs and headers are ok not having 100% contrast since the user<br>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&#39;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&#39;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&#39;t need it. As a
<br>result of removing those unnecessary details I have saved a lot of<br>space. Yes, padding and margin is good wherever we have an interactive<br>button that would need to be pushed, to avoid errors, but we really<br>don&#39;t need it for non interactive items if we design properly.
<br><br>- My key buttons are now language agnostic, &quot;del&quot; has been replaced by<br>just the backspace symbol and &quot;enter&quot; 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&#39;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&#39;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&#39;s a cool idea,<br>but unfortunately there&#39;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&#39;s why I&#39;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&#39;t know<br>the gamma values of the device in question.<br><br>- Since I don&#39;t have an openmoko yet I didnt know what the area on the
<br>bottom of the screen&nbsp;&nbsp;(I think it must be a read only buffer) is for<br>so I haven&#39;t mockuped it.<br><br>- Also I don&#39;t know what&#39;s the thing at the right of the search button<br>so I didn&#39;t include it.
<br><br>That&#39;s all, and excuse my English, I have work to do so I really don&#39;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 href="mailto:community@lists.openmoko.org">community@lists.openmoko.org</a><br><a href="http://lists.openmoko.org/mailman/listinfo/community">http://lists.openmoko.org/mailman/listinfo/community</a><br></blockquote>
</div><br>