Preliminary testing/review of UIO

Jonathan Hung jhung at
Thu Jun 16 20:30:13 UTC 2011

Did some testing of UIO in:
- Windows 7: FF4, Chrome 12, IE8
- Windows XP: IE6

Here are the issues (not sure if there are Jiras for some of these):

*Fat Panel*
- Increasing font size does not expand input selectors to accommodate text
in IE8 (FLUID-4292)
- Increasing the text size causes the tab icons to remain small and aligned
to top-left. Should be vertically centred and increased in size.
- Preview website does not have an input field to demonstrate the effect.
- Default style has no link styling, thus the preview content does not
distinguish between plain text and the link.
- Increase font size causes a gap to appear in selected tab-content border.
Affects Chrome 12 at 1.2 size, IE8 at 1.1 size.

*Full No Preview*
- Increasing font size does not increase the size of text inside text fields
after save & apply.
- Linearizing has undesired effects in Chrome 12 - header text overlaid on
top of input fields.

*Full with Preview*
- Changing theme has no affect on the preview background image.
- Linearizing causes the table in the preview to have a large first column
causing a horizontal scroll bar to appear in the Preview container.
- Preview does not have any inputs to preview the effect of making inputs

- Type face style not appearing in Text Style drop-down. i.e. "Comic Sans"
appears in default style and not in Comic Sans.
- Can not disable Table of Contents once enabled.
- Make inputs larger has no affect on input selector or text field in UIO
- Appears broken in IE6? Can't reveal the Fat Panel (even if served from a
server), and the UIO panel doesn't render in other layouts. States "There is
an error on the page".

- Should pressing up and down on text input field increase/decrease the

Jonathan Hung / jhung at <jhung.utoronto at>
IDRC - Interaction Designer / Researcher
Tel: (416) 977-6000 x3959
Fax: (416) 977-9844

On Thu, Jun 16, 2011 at 11:54 AM, James William Yoon <jyoon at> wrote:

> Continued, for FatPanelUIOptions:
> Fat panel, generally
> - Increase height of tab bar (by ~12px/?em)
> - Global increase in default text size, including text fields and
> drop-downs (by ~.2em? 3pt?)
> - Increase distance between tab/reset text and icons slightly (by ~2px/?em)
> - Increase distance between text fields (Text Size, Line Spacing) and text
> (by ~4px/?em)
> - Underlining of tab text (to better indicate its clickability)
> - Increase distance between tabs (by ~20px/?em)
> - Increase left margin (by ~18px/?em)
> Text & Display
> - Spacing between control sets (Text Size, Text Style, etc.) should be
> equidistant (at ~60px/?em)
> - On increase of text size, spacing between control sets should remain
> constant (right now, the spaces decrease at different rates)
> Layout & Navigation / Links & Buttons
> - Increase vertical spacing between controls (at ~24px/?em)
> - Increase text size of control labels, on top of global text size increase
> from above (by ~.2em)
> - Control descriptions should be in a lighter grey (#6d6d6d)
> Yellow on Black
> - Text field borders should be yellow
> Links & Buttons
> - "Emphasize links" should have no effect on tabs
> - "Make inputs larger" should have an effect on checkboxes
> James
> On Mon, Jun 13, 2011 at 10:29 AM, James William Yoon <jyoon at>wrote:
>> Hi Heidi and Jon,
>> I've done a run-through of UIO with and without preview (all testing
>> through Safari 5), and have come up with the following list of tweaks to be
>> made:
>> FullPreviewUIOptions
>> - Focus highlight on slider when using mouse shouldn't be there
>> - When using keyboard to move slider, it affects the preview window if the
>> slider is at the very end
>> - A bit more room (about 6 pixels) between the section headers ("Text and
>> display", etc.) and the controls would be good
>> - Vertical-center alignment of control labels with drop-down menus
>> - Once min-width is reached (~960px), introduce scrollbars, not wrapping
>> - Buttons should have a light-grey (say, F0F0F0) background
>> - Buttons should be left-aligned with the preview
>> FullNoPreviewUIOptions
>> - Section headers ("Text and display", etc.) and controls should line up
>> (currently, controls are lower than the headers)
>> - Vertical-center alignment of control labels and controls
>> - Once min-width is reached (~960px), introduce scrollbars, not wrapping
>> "Make inputs larger"
>> - Double the dimensions of the checkboxes
>> - Could we make the drop-downs bigger too? (until we get the rich ones
>> working fully)
>> "Simplify layout"
>> - Yikes... this needs a bit of work on the FullPreview and FullNoPreview
>> versions.
>> "Show table of contents"
>> - Add space between end of TOC and header (say, 24px)
>> I'll do another run-through with the fat panel when you give me the heads
>> up.
>> You guys are doing awesome. This is really great stuff!
>> James
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>

More information about the fluid-work mailing list