UX style guide

Most style guides on the web only describe visual elements and sometimes UI patterns. Hardly any give any guidance on how interactive elements should be used. For desktop applications I think it is good to have a wiki style reference library of interactive elements that can be easily shared or linked to a jira ticket.

Below is my starting point for a style guide for a desktop application. It is a contents list derived mostly from:


  1. Product Environment

    1. Dock

    2. Widget

    3. Pointers

  2. Windows

    1. Window management

    2. Window chrome

    3. Window States

    4. Multi-pane windows

    5. Modeless Dialogues

    6. Modal Dialogues

    7. Wizards

  3. Display controls

    1. Scrollbars

    2. Splitters

    3. Drawers

    4. Slide overs

    5. Tabs

    6. Progressive disclosure

    7. Accordions

    8. Tree structure

  4. Controls

    1. Imperative controls

      1. Buttons

      2. Button drop-down (Bang menu! Do not use)

      3. Split button drop-down

      4. Execute buttons

      5. Icon buttons

      6. Hyperlinks

      7. Command links

    2. Selection controls

      1. Check boxes

      2. Toggle buttons (mostly avoid)

      3. Switches

      4. Radio buttons

      5. Icon button group

      6. List controls

      7. Drop down / select box

      8. Tree controls

  5. Entry controls

    1. Labels

    2. Spin-boxes

    3. Amount spin-box

    4. Date and time

    5. Text inputs

    6. Combo box

    7. Sliders

  6. Commands

    1. Menus

    2. Context menus

    3. Toolbars

  7. Messages

    1. Error messages

    2. Warning messages

    3. Confirmations

    4. Notifications

    5. Tooltips

    6. Flyouts/Balloons

  8. Patterns

    1. List

    2. Table (blotter)

    3. Grid

    4. Filter and sorting

    5. Master Detail

    6. Tile/Card


What I like to do is then sketch out a piece of placeholder content for each item in the contents list to help populate a wiki.

Relationship Mapping

A workshop to help extract and document knowledge from domain experts.

The relationships between the human parts of large systems is always complex. Only domain experts who have spent considerable time with them can know who communicates with who and when and why.

This method aims to extract that complex knowledge and document it in a way that makes it easy to communicate and share.

Setup

Step 1

Write down the roles of all the people on index cards.

Step 2

Place the cards on a wall to roughly represent either their geographical locations, or conceptual groupings like departments, working relationships etc.

Step 3

Use masking tape to draw boxes around distinct areas to from solid groupings.

Step 4

Label the groupings, this will be easy for geographical groupings but more difficult for more conceptual ones.

I made this image small so you can't read the detail.

I made this image small so you can't read the detail.

Case studies

Now ask the expert to think of a specific case then using string and tape, draw a line that represents the movement of information between the people. After the string is tapped on, ask the expert to talk through it, noting it down separately (alternatively you could record the entire session, but this may throw people off). Use an index card, title the diagram and take a photo. You are now free to take the title and string down and explore another case.

You can use these photographs and the accompanying case descriptions recorded during the session as the starting point for some higher fidelity documentation. If you leave this up on the wall it can be used to facilitate conversations that crop up in the future, as I find it helps to have something to point at.

Illustrator to Icomoon workflow

Setting up the canvas

The canvas for the icon should be square and defined in pixels at 32 times the intended size. You can do this by typing the calculation into the height or width boxes. For example "12*32" would create a canvas suitable for a 12 pixel icon.

Setting up the pixel grid

Setup the grid to give 1 line every 32 pixels.

Setting snap to grid on

Set "Snap to Grid" on and show (not hide) the grid.
You now have a space which you can draw scaleable artwork that you can be certain of the pixels rendering at your defined size. You can turn off "snap to grid" at your discretion to overcome its creative limitations but be mindful of the effects on the outcome, and always test the icon in the browser at the intended size by exporting and building as described in the rest of the guide.

Stroked paths

Your artwork may appear solid when viewed in preview mode but if strokes instead of fills are used the visual will not transfer to an icon font. You can see what is a stroke or a fill by switching to "Outline" mode (command+Y on mac or View > Outline)

Outline

Preview

Outline Stroke

NOTE: The next steps make the artwork harder to change, so save a copy. You can convert strokes to solid shapes by selecting them and then Object > Path > Outline Stroke from the menu.

Strokes now shapes

Viewing the same shape in Outline mode shows all the artwork is now solid shapes

Make compound path

The artwork must be a single compound path for best results as an icon font. Select all the shapes and then Object > Compound Path > Make.

The effect of compound paths on the svg code

The icon font will generate a single vector path for each icon even if it is made up of several shapes (consider the lower case letter 'i' in a regular font, this is a single path that is scaled and coloured uniformly.)

After compound path

With all the shapes in a single compound path, there is only a single "path" tag in the svg code.

<svg version="1.1" id="Layer_1" x="0px" y="0px" width="384px" height="384px" viewBox="0 0 384 384" enable-background="new 0 0 384 384" xml:space="preserve"> <polygon points="336,208 192,64 48,208 16,176 192,0 368,176 "/> <rect x="32" y="224" width="320" height="32"/> <rect x="32" y="288" width="320" height="32"/> <rect x="32" y="352" width="320" height="32"/> </svg>

Before compound path

With no compound path made, the component parts of the artwork can be seen as separate laters in the layers panel. These are translated directly to separate tags in the svg code.

<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 384 384" enable-background="new 0 0 384 384" xml:space="preserve"> <path d="M48,208l-32-32L192,0l176,176l-32,32L192,64L48,208z M32,256h320v-32H32V256z M32,320h320v-32H32V320z M32,384h320v-32H32 V384z"/> </svg>

Pathfinder Unite

Do not confuse the pathfinder "unite" function with making a compound path. Whilst still inside illustrator, this seems the same but does not have the same effect on the layers or the code.

<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 384 384" enable-background="new 0 0 384 384" xml:space="preserve"> <g> <polygon points="192,64 336,208 368,176 192,0 16,176 48,208 "/> <rect x="32" y="224" width="320" height="32"/> <rect x="32" y="288" width="320" height="32"/> <rect x="32" y="352" width="320" height="32"/> </g> </svg>

Save As > SVG options

Most the default options for Illustrators save as svg are sound. Check to make sure your options match the ones below.

NOTE: give your svg (and all your files!) a good name. Example = <iconame>-<size>.svg e.g. "hurger-12.svg"

1. The "Responsive" option adds a width and height attribute to the opening SVG tag ("width="384px" height="384px"). This is not needed for the icon-font and 

1. The "Responsive" option adds a width and height attribute to the opening SVG tag ("width="384px" height="384px"). This is not needed for the icon-font and 

The Icomoon App

Open the icomoon app at icomoon.com and take note that:

  1. Each icon must be within a set, the "import icons" button will bring icons into a newly created set.
  2. The example below has several sets of icons already imported.
  3. Each set contains icons that share the same 'size'.

Import into a set

Import an SVG into a set by selecting hamburger > Import to set and then find your svg file on your desktop.

New Icon shown in set

You can see the new icon below is not selected (yellow border)

Change the grid size of a set

Change the "grid size" of an icon set by selecting hamburger menu > Get info ...

... then "Reset Grid Size".

Input the size that corresponds with the icons intended size.

Repeat for all your icons/sets.

Generate Font

Once you have all your icons ready, make sure they are all selected and then click "Generate Font" at the bottom right of the app.

Download the icon font

Click the "download" button at the bottom right of the app.