My proposal covers also the tools for the design process.
Mockups
Here are different tools to create UX mockups :
- A lot of companies use Balsamiq, but there is no more free (0$) version
- in order to "eat our own dog food", we could use Draw + gallery
extension to provide basic objects. But the problems are :
- very time consuming to create a new gallery with all widgets
- widgets will be simple shapes and it will not be easy to make variations for UX mockups (ex : simulate data in a table)
- I recommend Pencil 2.X (http://pencil.evolus.vn/) :
- Pencil is developed to create mockups, period.
- it's free (0$ and open source) and x-platform
- there is already a list of widgets specialized for creating mockups
- optionally, we can extend widgets to have specific LO widgets, although this is not obvious
- I just found a bug : when you drag an object from the left column, sometimes it is not created in the main panel. The workaround is to drag the object *slowly* when you enter the main panel !
Rules for Mockups
A great tool is nothing without some rules to produce good results.
- export as pdf/svg/png
- each mockup should describe one use case
-
As a basic rule for layout, each mockup should contain :
-
list all available states\ - list all transitions between states, with the associated rules
here are some good examples of mockups :
http://wiki.openoffice.org/wiki/User_Experience/DocumentCheck (by Christoph Noak)
https://wiki.documentfoundation.org/Design/Whiteboard/Calc_Range_Names (by Christoph Noak) and the associated image : https://wiki.documentfoundation.org/images/e/e2/DesignTeam_Mockup_Calc_RangeNames.png
http://design.canonical.com/2013/03/app-patterns-applied-calculator-key-journeys/ and http://design.canonical.com/2013/03/app-patterns-applied-clock-key-journeys/ (by Canonical).
They are very interesting, because :
- they have simple use cases : "start...", "view...", "delete...", "add...", "change city...", "set an alarm..."
- they describe the behavior even for every keystroke !
Prototypes
They must be easy to code, easy to deploy. Today, the obvious choice is HTML5. In order to speed up, we can add jQuery, jQueryUI (?) Maybe ExtJS, because it provides some widgets similar to LibreOffice (tabs, panels, dialogs...)
Another solution would be QML. The only problem is that it requires some software to deploy (qmlscene ?)
Bitmap mockups (for VI only)
- Gimp (export jpg/png)