Balsamiq / myBalsamiq Workshop

Michael Gaigg

@michaelgaigg

Examples

• Douglas County Energy Dashboard• NC DOT: SPOT On!ine• US Census: Community TIGER

Wireframes as Part of the Development Process

• Waterfall Projects- Strategy – Concept – Design – Graphics – Implementation- 2 or 3 rounds of Wireframes

• Agile- Design as part of each sprint & by the team- 1 or 2 days max- Document design decisions, consideration and implications

• Products / Solutions- Involve stakeholders- Validate technical feasibility

Dealing with Clients

• Communicate- Don’t present your wireframes in isolation- Document and explain design decisions

• Offer points of reference- Clients value your design more if they have points of reference- Show a bad design that doesn't offer as much value- Show a good design that your client is familiar with

• Move on- Don’t get hung up on details- Change skin or increase visual fidelity- Rapid prototyping to show look & feel

Best Practices - General

• Set expectations: WHY and WHAT• Think holistically and Focus in later• I love:

- Versions- Sticky notes- Assets

• Don’t use placeholders!

• Map UI Pattern Library- http://www.designingmapinterfaces.com/patterns/

Best Practices - Balsamiq

• Use latest desktop version (upgrade periodically)• One project = one directory• All .bmml files in this directory + /assets folder• Configuration

- BalsamiqMockups.cfg (in local store folder)- <documentsPath>\\mikeg\Balsamiq</documentsPath>- <fontFace>Architect Small Block</fontFace>- rememberWindowSize, useCookies, snappingEnabled, selectionColor

• MockupsToGo- https://mockupstogo.mybalsamiq.com/projects

Using Desktop & Web effectively

• Start on desktop and move to myBalsamiq (web)• Collaboration• Version Control (History)• Interactive prototype

• Upload files• Single files: Create a project on myBalsamiq & upload BMML files

from desktop (add notes)• Larger projects: Zip project and upload via "Upload new project..."

• Update files• Use "New Mockup > Upload a new mockup" to replace existing files

Assets (= Templates)

• Are "templates" stored in assets folder- Get latest from \\mikeg\Balsamiq\- Place in your local ...\Balsamiq Mockups\Assets- Avoid cloud storage (Dropbox, Google Drive, shared drives)

• 2 Types- Account (site-wide) assets- Project assets (need to be uploaded to myBalsamiq separately)

• Keep them in-sync

Assets Creation & Usage

• Group controls• Name the grouped controls

- Will create the assets folder for you- Adds the template to assets\symbols.bmml

• Usage- Use like any other control- Create main template as the frame- Override properties as needed

Sharing Strategies - Static

• Images- Clipboard- PNG- Permalink (web)

• BMML- Source files

• ZIP- Send archive to colleague

Sharing Strategies - Interactive

• PDF (desktop & web)- Slide order is important- Use the same background control on all pages & lock it- Export to actual size (100%) for best print quality- Link mockups and show linking hints

• URL (web)- First slide is the homepage- Set access: Private by default (website, blog, wiki)- Usability testing: UserTesting.com ($49 per participant), Loop11,

Usabilia, Kupima, UserZoom

Collaboration

• myBalsamiq- Invite project member- Add comments- Propose alternate versions - After some collaboration consolidate into v2

• Next Steps- Document design decision, assumptions, implications- Store code in TFS, SVN, Github- Version control really only in myBalsamiq

The Road Ahead

• Best use of our myBalsamiq subscription?- Only use when really needed- Archive when done- Do we need more projects?

• Knowledge Transfer- More (detailed/focused) Workshops?- Enhance site assets

• We can help- Review, Design, Graphics, Implementation- POC: Michael Gaigg, mgaigg@esri.com, x2688