[Design][Proposal] Lozenge shape

[Mimi Yin]

I think it's important to keep in perspective the role of the dotted  
outline, why it came into existence on the web and how the Scooby UI  
is different from traditional web UIs...which in turn requires us to  
re-examine the dotted outline

It's largely a secondary visual feedback mechanism. What users notice  
first and foremost are the mouseover effects: Highlights, changes in  
color, and underlines.

As far as I can tell, the dotted outline is used to primarily  
communicate keyboard selection focus (as opposed to mouse focus) and  
in some situations to provide a mousedown state when changing views  
(e.g. clicking on a link to GO somewhere).

This primarily because traditionally in web UIs, there is NO notion  
of focus (except for for text fields). So in order to use the  
keyboard, browsers needed to come up with visual feedback to tell the  
user where the keyboard focus was at all times. In other words, the  
dotted outline was created to compensate for a lack in web UIs.

However, Scooby does have a notion of focus. The goal for Scooby is  
to behave more like Desktop apps, which do not have/need a dotted  
outline to communicate keyboard focus because they have built-in  
visual feedback to communicate focus.

Given that, I think I'm comfortable muddling with this web convention  
a bit and using our own visual syntax to communicate focus. I think  
for most things, the dotted outline is actually too subtle to capture  
your attention. On a crowded calendar filled with lozenges, I'm not  
sure I could locate the dotted outline very easily.

However, I have tweaked the dotted outline selection focus (lozenge  
on the left) by giving it 1 pixel of inside padding. That should help  
readability a tiny bit.

-------------- next part --------------
A non-text attachment was scrubbed...
Name: dotseven_lozenges_6_d-wide.png
Type: image/png
Size: 86007 bytes
Desc: not available
Url : http://lists.osafoundation.org/pipermail/design/attachments/20060502/96220ac9/dotseven_lozenges_6_d-wide.png
-------------- next part --------------


On May 1, 2006, at 9:12 PM, Matthew Eernisse wrote:

> Yep. The focus/selection indication. It also shows up on stuff like  
> form elements like checkboxes and buttons too, when they have focus  
> (either clicking or moving focus with the tab key).
>
> Unfortunately, at least the way the graphic shows in Thunderbird,  
> the two lozenges in the side-by-side comparison look really  
> similar. If I saw either one in isolation in a browser, I'd  
> probably assume the UI element is something that has focus.
>
> Sometimes violating existing convention makes sense of course -- I  
> was just saying that usually that kind of thing is a last resort.  
> Ideally I would think we'd want to exhaust the other possible  
> design avenues first -- and look to see if there's not some other  
> way to indicate 'tentative' status that's equally effective, and  
> doesn't conflict with a really pervasive, pre-existing visual motif.
>
> Perhaps 'tentative' could be represented by making the block look  
> fainter by changing its opacity? I don't know if that's even  
> possible in Chandler. I know it is something we could do with CSS  
> in the browser.
>
>
> Matthew
>
>
> Mimi Yin wrote:
>> Matthew, you're talking about the dotted black outline that  
>> appears  when browsing links with the keyboard and/or on mouse- 
>> down when  clicking on links? (IE And Firefox do this, Safari  
>> doesnt.)
>> Here's a tweak that might almost address your concern: Making a 2   
>> pixel wide dashed outline that lies flat against the lozenge  
>> border,  rather than a single-pixel dashed outline. This makes the  
>> dashed  outline stand out a bit more without making it ragged and  
>> too  distracting.
>> The lozenge on the left has the single pixel black dashed outline  
>> to  indicate selection. The lozenge on the right only has the  
>> tentative  status 2 pixel-wide dashed outline.
>> Mimi
>> --------------------------------------------------------------------- 
>> ---
>> On May 1, 2006, at 5:53 PM, Matthew Eernisse wrote:
>>> Just a thought re. dotted lines and focus indication ...
>>>
>>> Mimi Yin wrote:
>>>
>>>> I think so long as we don't also use a dotted line to  
>>>> represent   selection in Chandler or Scooby, we should be okay.
>>>> Users don't need to be able to decipher the visual syntax just  
>>>> by   looking at the calendar. They will learn the visual syntax   
>>>> through  interaction (cause and effect). Assuming performance   
>>>> improvements,  users should be be okay on this front.
>>>
>>>
>>> The only problem I might foresee is that people's interaction  
>>> with  Scooby as a Web app will be informed by their interaction  
>>> with  other Web apps.
>>>
>>> They will likely assume (for better or for worse) a certain set  
>>> of  conventions shared between all the browser-based apps they  
>>> use --  like the dotted line around focused elements that you see  
>>> in  Internet Explorer. That's pretty universally understood in  
>>> the  browser by people using IE as meaning "this thing has focus."
>>>
>>> I'm not even sure if this is something you can override, so the   
>>> idea of simply not using it to represent selection in Scooby may   
>>> not be an option.
>>>
>>> That's not to say we should never depart from conventions, but  
>>> we  should do it thoughtfully, when there are compelling reasons  
>>> to do  it, and with the awareness that it will cause users some   
>>> consternation because we are not only not leveraging existing   
>>> conventions, we are contravening them.
>>>
>>>
>>> Matthew
>>> _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
>>>
>>> Open Source Applications Foundation "Design" mailing list
>>> http://lists.osafoundation.org/mailman/listinfo/design
>> --------------------------------------------------------------------- 
>> ---
>> _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
>> Open Source Applications Foundation "Design" mailing list
>> http://lists.osafoundation.org/mailman/listinfo/design
>
> _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
>
> Open Source Applications Foundation "Design" mailing list
> http://lists.osafoundation.org/mailman/listinfo/design