For those of you who are Million Cups of Orange County fans, today we were talking about UI/UX and a short list of tools.
UI/UX, (UI) User Interface, (UX) User Experience
First let me clear up the difference between UI and UX, since a clear explanation was not given at the meeting.
Together UI/UX represents how we design things and how people interact with those designs.
UI stands for User Interface and is basically the technical side of life. It’s the design look and technical specifications related to the app or website. How it looks and functions.
UX stands for User Experience and although it overlaps, it’s a whole different ballgame. The User Experience is just that, how the user interacts with your app or site whether it feels effortless or clumsy, whether it’s confusing or intuitive, whether it’s accessible to someone who’s colorblind, whether it loads quickly or is considered a dog.
Prototyping an App or Website
My two ways of working on a project are quick pencil sketches for rough sketches and either Adobe Photoshop or Adobe Illustrator for more refined prototypes and design. To get either of those into a very quick test format I like two different tools.
For the rough pencil sketches to a pretotype (and yes.. it’s spelled correctly), you can use Prototype on Paper, POPapp.in. It allows you to do quick paper sketches or quick downloadable screenshot kits available online, take a set of photos with your phone and link them together to test. It’s incredibly quick.
The other option is a product that I use called Invision, InvisionApp.com, which allows you to upload screenshots, or Adobe design files, and once again, link them together for testing on either web or mobile. These files can either be low fidelity wireframes, high fidelity prototypes, or something inbetween; it’s up to you.
Test, Test, and Test
I believe in testing what you build. You usually learn that your assumptions were not quite as accurate as you thought when you started, so testing early is critical. I use Wedgies to throw up quick single question comparison surveys and push them out to social media for responses, and I use UsabilityHub.com (and their Karma points) to do 5 second tests of all sorts, as well as click and heat map tests. Both tools are indispensible when trying to decide what to use.
That’s my quick list from today’s meeting. If you have any additional questions for me, feel free to let me a message through my contact form, and I’ll try to answer any other questions that you have.