I’m very pleased to announce that Ryan Watkins has joined our UI Engineering team at Esri.
Ryan earned his BS in Computer Science from University of California Riverside and attended the Art Institute in Los Angeles for Game Art & Design. His previous jobs equip him with an extensive background in front-end development (full stack) and hands-on experience in game design (unity).
Ryan is the author of the book "Procedural Content Generation for Unity Game Development"
He has a keen eye for application and graphics design and we are looking forward having him as integral part of the team, division and company. Welcome on board!
This week Kevin (Yuan) Gao (LinkedIn) joined our team as a UI Engineer.
Kevin earned his Master of Science (MSc.) degree in Human Computer Interaction (HCI) from the University of Michigan. He also received a Bachelor of Business Administration (BBA) from the Shanghai Jiao Tong University.
I'm very happy that Kevin decided to join our team and am looking forward to seeing his HCI and design skills being applied to designing map interfaces for Esri Professional Services. Welcome on board!
Thanks once again for encouraging me to write this blog, this really keeps me going! THANK YOU!
I also started a blog about Map UI Patterns where I summarize and publish my experience by describing common patterns, principles, and practices when working with map apps.
Highlights from last year
- Web Mapping Application Interface Design Best Practices and Tools | Slides | Follow-up
My Tech session talk at the Esri DevSummit 2013 in Palm Springs, CA
- 10 Design Lessons learned from my Sons
- Top 10 Design Influencers
- The best way to predict the future is to shape it
Map UI Patterns
This week Cody Lawson (LinkedIn) joined our team as a UI Engineer.
Cody earned his Bachelor degree in Web Design & Interactive Media from the Art Institute of California. As a freelancer he has helped many clients with his skills in web & graphic design as well as ecommerce & user interface development.
I'm very excited seeing his design and web development skills being applied to designing map interfaces for Esri Professional Services. Welcome on board!
Finally a team was able to break the spell, GiS (Geeks in Soccer) were beaten for the first time in Esri Cup history and I am glad to say that it was us that eliminated them in a strong semi-final game (7:5) just to pave the way into the final.
Once again the tournament was great fun and an amazing "work" event. For the first time we played indoors which is a whole different game that favors the technical, futsal-style players.
Jayson earned his Bachelor degrees in Studio Art (summa cum laude) from the UC Irvine and in Geography from the University of North Carolina at Greensboro. In his previous jobs he worked as a web developer at the UC Santa Cruz and the County of Riverside. For the last two years he has been part of the Esri Design Center and we are lucky enough to transfer all his graphic design skills to our group.
I'm very excited seeing his design and web development skills being applied to designing map interfaces for Esri Professional Services now. Welcome on board!
I can't believe yet another year has passed and I haven't given up adding stuff to this blog - and this is only because of YOU! I'm excited hearing about your experiences and your ideas, reading your feedback and suggestions. Thanks so much and keep 'em coming!
Here is a short list of highlights from the past year and some of my personal favorites!
Highlights from last year
- 10 MyBalsamiq Tips & Tricks
- Wireframing – what a waste of time… not!
- The 4 Questions of Strategy
- Proposing: Feature Spotlight
- Wireframing as an Indicator for Problems in your Project Structure
After having used Balsamiq for some years now I was excited to try MyBalsamiq which is basically Balsamiq on the web which allows for better sharing and collaboration with your team and clients. This blog article intents to share my experiences and gotchas of using MyBalsamiq with you.
Tips & Tricks
Setting the stage is key to a successful use of MyBalsamiq. Explain to your team members and clients that wireframing helps to communicate ideas and the WHY and WHAT we are doing by intentionally stripping out visual fidelity so one doesn't get distracted with the HOW.
I typically create the first version of any design using Balsamiq for desktop. I then upload it to a project folder, dub it v1 (version 1) and share it with the team (and client) so they can start commenting or proposing alternate versions as part of the thread. After reviewing and discussing the proposed changes, missing items, misunderstood elements, etc. I create a revised version which instead of simply adding another comment/alternative I upload once again, this time naming it v2 (version 2).
Again I open it up for a round of comments. I strongly recommend finalizing the design at this point by creating a document that states the purpose of the screen, specifies any requirements and uses the final mockup as the proposed design. Move on! If you for whatever reason you cannot move on, then this might be a strong indicator that you might have a problem in your project structure.
Involve your clients
Yes, I create beautiful designs just to see them being destroyed by ignorant clients. Well, I guess it's the other way around, designers tend to be attached to their intellectual creation more often than they should. Well, chicken or egg, involving your client in the process is always a win-win situation. So do it, don't hesitate having your design dissected, your ideas challenged and your assumptions validated!
Notes are your Friends
Sometimes I start a wireframe with an empty frame and a bunch of sticky notes. I slowly fill the sticky notes with bullet points of requirements or anything I feel belongs into this space. Only later I start designing the actual components that make up the screen.
In the same way I ask my clients to use sticky notes to annotate anything they feel needs to be said about the design, missing items, assumptions that aren't reflected, new ideas, etc. It really helps commenting on concrete items rather than abstract word constructs. Remember, sticky notes are your best friends.
Assets are grouped items with a name that can be used like any other sketch control. Assets can range from custom frames, re-usable templates, industry-specific or device depended controls, etc. Spend some time creating assets and share them either site-wide or on a project by project basis. Have a look at the popular free map controls I've created some time ago to see what I mean.
Holistic vs. Focused
I almost never get into too much detail upfront. That's for multiple reasons:
- It's really easy getting hung up in details
- More often than not you will find yourself wasting precious time on something that is still in flux and bound to be thrown away anyway
- You lose sight of the bigger picture (navigation architecture, overall layout)
- It becomes harder and harder to make changes without rethinking your concept/layout
This tip becomes a rule when working in an agile environment. You need to design the holistic view upfront, have a solid concept in place that describes how you will integrate the pieces later. Think a lot and validate (e.g. usability testing on your wireframes)!
Start the holistic design as soon as you have a good handle on the available user stories and (ideally) have it done before the first sprint planning meeting - I've heard the term Sprint 0 used a lot.
Encourage the sprint master to create a "Design UI" task which will be added to each epic or even user story that requires user interface design - this is the place to design details.
Many times I create a concept sheet or experience workflow diagram directly in wireframes. I use simple sticky notes or window controls and connect them with arrows to show how a user will flow through the application. Very often these boxes later become pages that I need to design which is kinda neat because I can directly link these pages from the workflow diagram. Managers really appreciate this high-level view and are able to comprehend better the overall structure of the site/application. You will see the quality of questions improve as well 😉
Your clients and project managers love this feature: launch prototype. We've used it before on the desktop but now we have it available online using a private url. There is also a great article about how to integrate with the leading user testing tools (Usabilla, UserZoom,...).
Version history seems to be nice to have but it actually turns out to be indispensable. A designer makes decisions based on observations and changing requirements (and sometimes taste ;)). Being able to compare versions over time proves to be the best line of argumentation when it comes to explaining why we reached this conclusion?. Sometimes it is less the "how we did it" rather than the "how we got there" piece!
Get MyBalsamiq for (almost) free
Full disclosure: I'm not getting a dime for saying this. But here is how you turn your existing desktop licenses into an (almost) free subscription: "...existing Mockups for Desktop customers will be able to apply half of what you paid for Mockups for Desktop towards myBalsamiq credit."
Any invited user to myBalsamiq can use the online version for free basically saving on desktop licenses. While not as slick as desktop, it's a nice treat.
Check-in / Check-out
I'd really love to see a version control system that can be connected to your desktop version. Basic functionality would be:
- Get latest version(s) from myBalsamiq (and synchronize with desktop)
- Check-in a newer version from desktop (and propose as new)
- Show me changes for all files (i.e. compare your desktop version to myBalsamiq)
Right now I find it really difficult to get the latest version from the web, modify on desktop and update existing thread with newer version. Balsamiq team: any plans for such an integration?
High-level (conceptual) view of all screens
Above I've talked about sketching the conceptual workflow. While starting in v2.2 the Balsamiq team added a 'site map' control (very cool btw), this doesn't really fit my need to show the workflow. I guess for now I need to stick to my connected notes 🙁
Free Download! Get 9 featured talks (video/audio/pdf) and 8 workshops (pdf only) from last year’s User Interface 16 conference (by UIE).
- Culture You are Soaking In It - Steve Portigal
- Design Challenges CSS Answers - Stephanie (Sullivan) Rewis and Greg Rewis
- Designing for Mice and Men - Bill Scott
- Experience Leadership - Kim Goodwin
- Input Moving Beyond Forms - Luke Wroblewski
- Meeting Design for the Design Process - Kevin Hoffman
- The Business Case for (or Against) UX - Brandon Schauer
- The Many Uses of Application Maps - Hagan Rivers
- The Unintuitive Nature of Creating Intuitive Designs - Jared Spool
- Designing Rich Interactive Experiences - Bill Scott
- Designing with Scenarios - Kim Goodwin
- Good Design Faster - Brandon Schauer
- HTML5 and CSS3 What Designers Really Need to Know - Stephanie (Sullivan) Rewis and Greg Rewis
- Immersive Field Research Techniques - Steve Portigal
- Kicking Off Projects Right - Kevin Hoffman
- Mobile Web Design - Luke Wroblewski
- Simplifying Complex Applications - Hagan Rivers
How to get the free recordings?
It’s easy. Just submit your email by Tuesday, September 25, 11:59 PM ET and you’ll get last year’s UI16 talks and materials for free. No tricks, no quantity limits. We’ll send you an email with details on how to access this bundle of goodness.
Today I have a special treat for you, an awesome piece of Esri's history (thx Jayson for pointing this out to me):
1994 - www.esri.com launched
Gotta love this!
Reminds me of my first homepage made in 1993, unfortunately I don't have any screenshots or code anymore (one of my biggest regrets). All I remember is that I used frames, lots of beveled buttons an an animated GIF for the email link.
Can't believe how far we've come in only 20 years.