\documentclass{article}
\usepackage{ulem}
\usepackage{graphicx}
\usepackage{hyperref}
\pagestyle{headings}
\begin{document}
\part{Horde User Interface Design}
Notes and potential procedures for good design. <a href="http://www.lukew.com/ff/">http://www.lukew.com/ff/</a> and <a href="http://designingwebinterfaces.com/">http://designingwebinterfaces.com/</a> are the source for many of these

\section{Nice effects to incorporate}
\begin{itemize}
\item <a href="http://www.netzgesta.de/gauge/">http://www.netzgesta.de/gauge/</a>


\end{itemize}
\section{Examples/inspirations}
\begin{itemize}
\item <a href="http://www.subtraction.com/2009/11/30/really-basic-maths">http://www.subtraction.com/2009/11/30/really-basic-maths</a>


\item <a href="http://basicmaths.subtraction.com/">http://basicmaths.subtraction.com/</a>


\item <a href="http://birdfeed.tumblr.com/post/249935921/birdfeed-1-2">http://birdfeed.tumblr.com/post/249935921/birdfeed-1-2</a>


\item <a href="http://24ways.org/2009/the-construction-of-instruction">http://24ways.org/2009/the-construction-of-instruction</a>


\item <a href="http://24ways.org/2009/type-inspired-interfaces">http://24ways.org/2009/type-inspired-interfaces</a>


\end{itemize}
\section{CSS/Design building blocks}
\begin{itemize}
\item <a href="http://ajaxian.com/archives/cross-browser-inline-block">http://ajaxian.com/archives/cross-browser-inline-block</a>


\item <a href="http://ajaxian.com/archives/nicole-sullivans-object-oriented-css">http://ajaxian.com/archives/nicole-sullivans-object-oriented-css</a>


\item <a href="http://ajaxian.com/archives/text-overflow-for-firefox-via-jquery">http://ajaxian.com/archives/text-overflow-for-firefox-via-jquery</a>


\item <a href="http://a.deveria.com/?p=236">http://a.deveria.com/?p=236</a>


\item <a href="http://blog.seanmartell.com/2009/04/21/css3-flexible-ui-avoid-recutting-ui-graphics-for-mobile/">http://blog.seanmartell.com/2009/04/21/css3-flexible-ui-avoid-recutting-ui-graphics-for-mobile/</a>


\end{itemize}
\section{Patterns/component libraries}
\begin{itemize}
\item <a href="http://designingwebinterfaces.com/15-common-components">http://designingwebinterfaces.com/15-common-components</a>


\item <a href="http://designingwebinterfaces.com/essential\_controls">http://designingwebinterfaces.com/essential\textbackslash\{\}\_controls</a>


\item <a href="http://stopdesign.com/archive/2009/02/04/recreating-the-button.html">http://stopdesign.com/archive/2009/02/04/recreating-the-button.html</a> (for cross-browser buttons)


\item <a href="http://designingwebinterfaces.com/screencasts-added-to-flickr">http://designingwebinterfaces.com/screencasts-added-to-flickr</a> (390 screencasts)


\end{itemize}
\section{Keyboard accessibility}
\begin{itemize}
\item <a href="http://24ways.org/2009/dont-lose-your-focus">http://24ways.org/2009/dont-lose-your-focus</a>


\end{itemize}
\section{Design Consideration}
<a href="http://ignorethecode.net/blog/2010/01/21/realism\_in\_ui\_design/">http://ignorethecode.net/blog/2010/01/21/realism\textbackslash\{\}\_in\textbackslash\{\}\_ui\textbackslash\{\}\_design/</a>

<a href="http://www.lukew.com/ff/entry.asp?754">http://www.lukew.com/ff/entry.asp?754</a>

\begin{itemize}
\item Pattern Recognition: allows us to identify relationships within information. (the data).


\item Story Telling: gives us a way to organize data into something meaningful by focusing on a big idea and supporting messages (the synthesis).


\item Visual Hierarchy: gives us a way to tell the story effectively (the means).


\item Empathy: allows us to make the story memorable and impactful (the meaning).


\item Modes: <a href="http://ignorethecode.net/blog/2009/07/02/modes-quasimodes-and-the-iphone/">http://ignorethecode.net/blog/2009/07/02/modes-quasimodes-and-the-iphone/</a>


\end{itemize}
\section{Behaviors}
\begin{itemize}
\item Visually associate dependent elements: <a href="http://www.lukew.com/ff/entry.asp?764">http://www.lukew.com/ff/entry.asp?764</a>


\item Previous and next actions: <a href="http://www.uie.com/articles/previous\_next\_luke">http://www.uie.com/articles/previous\textbackslash\{\}\_next\textbackslash\{\}\_luke</a>


\end{itemize}
\subsection{Repeating items}
\begin{itemize}
\item <a href="http://culturedcode.com/things/blog/2008/02/habemus-dialogum-we-have-a-dialog.html">http://culturedcode.com/things/blog/2008/02/habemus-dialogum-we-have-a-dialog.html</a>


\end{itemize}
\section{Local factors}
<a href="http://www.lukew.com/ff/entry.asp?752">http://www.lukew.com/ff/entry.asp?752</a>

\begin{itemize}
\item Connection speed (broadband penetration)


\item Index size (scale of local language content available)


\item Task behaviors (bargaining in shopping)


\item Infrastructure (transportation, electricity)


\item Language characteristics (left to right, right to left, alphabetic vs. non, length)


\item Desktop penetration


\item Mobile penetration


\item Literacy rates


\item Demographics (age skew)


\item Cultural symbols (icon semiotics)


\item Visual conventions (color associations)


\item Work conventions


\item Cultural dimensions


\item Expected visual density


\end{itemize}
\section{Sketches}
<a href="http://www.lukew.com/ff/entry.asp?747">http://www.lukew.com/ff/entry.asp?747</a>

\begin{itemize}
\item In some organization, developers are doing design. How can we deal with this?


\item Parallel design: have several developers attempt to solve the problem at the same time. Parallel design means we get to hear from everybody


\item 5 Sketches: saturate the design space, mash up the ideas, get to a pretty good solution, analyze it, and deliver a written statement


\end{itemize}
<a href="http://www.lukew.com/ff/entry.asp?749">http://www.lukew.com/ff/entry.asp?749</a>

\begin{itemize}
\item We are taught to think that drawing is about making things look realistic.


\item But drawing is really about getting ideas down on a page. Think of it as another vocabulary that enables discussion.


\end{itemize}
<a href="http://www.lukew.com/ff/entry.asp?748">http://www.lukew.com/ff/entry.asp?748</a>

\begin{itemize}
\item Clients want great experiences and they want them fast


\item Traditionally designers use wireframes to explore designs but they only focus on a single page of the experience at a time.


\item We need a process to explore ideas without getting bogged down in unnecessary detail. It needs to reveal the best of multiple options and gets everyones input and buy-in.


\item Sketching: explore and find lots of ideas (exploratory sketching) or gain convergence (refinement sketching).


\end{itemize}
<a href="http://www.lukew.com/ff/entry.asp?750">http://www.lukew.com/ff/entry.asp?750</a>

\begin{itemize}
\item Use quick sketches in the early stages of a project


\item Ensure you do lots of sketches so many ideas come forward


\item Discuss and edit the sketches collaboratively


\item Build consensus and buy-in through this process


\end{itemize}
\section{Swimlanes}
<a href="http://www.lukew.com/ff/entry.asp?745">http://www.lukew.com/ff/entry.asp?745</a>

\begin{itemize}
\item UX swimlanes outline a birds eye view of a story, scenario, or component for sponsors, designers, businesses, and engineers.


\end{itemize}
\section{Redesign Ideas}
Organization and Flow

1 From the user's perspective, eliminate the concept of modules, and group functionality together by how it's used. By placing these grouped modules within tabs, for example, the interface can become focused only on the task at hand and downplay extraneous controls, dramatically simplifying the interface.

2 Create smoother flows between related modules.

3 Put frequently used tools close at hand. For example, let user add contacts from within the email screen?

4 Eliminate clutter. Remove defunct modules from the interface, or, if for some reason they need to remain, sequester them.

Visual Design

6 Modernize (and standardize) the look-and-feel.

7 Reconsider the use of iconography. Having an icon for every single module is overwhelming, and its difficult to make each icon memorable. Consider using icons much more sparingly.

8 Increase the size of the type. Some type in the interface is really small  10px or smaller. Larger type (if handled properly) will be easier to read and appear friendlier.

9 Sweat the details. Taking time to carefully align form labels with their respective form fields, for example, conveys an image of quality and precision.

12 Avoid overlapping modals.

13 Add on-states to the navigation to make it easy for users to orient themselves.

Interactivity and Behavior

14 Anticipate the users first move. For example, on page load, automatically place the focus on the first form element on create pages when its a text field, instead of forcing the user to click into the field.

15 Make it impossible for users to make errors. Validate forms before the user clicks Save to highlight errors or omitted fields, rather than after clicking. (For example, provide clear feedback and disable the Save button until the user has filled the required fields.)

16 Make it easier to edit content. Instead of having the user click on an edit icon to the right of the items name, users should be able to click on the title itself.

17 Place like controls in like positions. For example, sometimes pop-ups are closed with a Close link in the upper-right corner, and other times they are closed with  a Cancel button near the middle of the pop-up.

Nomenclature

21 Keep module names as straightforward as possible. consider names that are descriptive rather than clever.

22 Better name for virtual folders/virtual addressbooks/etc - Smart Folders? ...

23 Allow users to create daisy chains all at once, in a single flow, instead of forcing them to switch back and forth between modules

24 Scale more gracefully as more items are created.

Put frequently used tools at users fingertips. Don't make users switch modules to perform a regularly needed function

25 Search all content with a single, global search box instead of having to use each modules search function.

26 Tag any item using the same, global taxonomy. Retrieve content more easily throughout the system by tagging any item.

27 Make modules consistent. Default sorts should be consistent, searches should be consistent (some modules search slugs, some do not), modules should have the same component parts.

\end{document}
