Great UI/UX peer website

I stumbled across a great peer website today and wanted to pass it along. If you already know about Michael Locke (UI/UX Design, Training & Education), then feel free to leave “Old” in the comment section for this post.

Michael Locke is a Lead UX Designer with ADP with over 15 years web design experience, front end web development proficiency, marketing, photography, and a ton of groovy, savvy knowledge in related fields. From his “About” section, “I have a huge passion for helping people succeed.” Boom. There it is.

I highly recommend bookmarking his website and checking in now and then.

Wireframing & prototyping tools, a pinch here and a dash there…

With the internet now accessible anytime, nearly everywhere, across a plethora of devices, the ability to demonstrate a fluid interactive experience is quickly becoming a “must do” on any project. While static wireframes are still useful in initial design stages, they fail to communicate motion and movement which are integral to the user experience of today’s websites and apps. (Among other aspects.)

Fortunately, more and more wireframing and prototyping programs and tools are entering the market, so you don’t have to have be a front-end developer in order to create some pretty good, proof-of-concept examples to demonstrate the a feature, animation, or flow, instead of trying to describe it and leave it open to interpretation. Many offer a 30 day free-trial period, monthly or annual subscription options, reduced fee for inactivity (park the account), superb documentation and other perks.

Unfortunately, there doesn’t appear to be one program that can do everything you might need or want. I use about 5 different programs depending on what exactly I think will work the best for whatever it is I’m trying to accomplish. Or my team is trying to accomplish. And I still continue to research, experiment, and compare programs and tools as I go.

Below are some brief thoughts regarding the various wireframing/prototyping tools that I’ve been playing around with and incorporating into my projects. (Please note: this is not a soup-to-nuts audit and write-up of each program – just my observations and takeaways from personal use and team member input.)


 

For client presentations with polished comps demonstrating IA design or animations:

invision-logo-gray_300
Invision requires zero coding and is super easy to pick up and use. It’s a browser-based software so you can log in anytime and work on your project. For client presentations I upload static comps and use hot-spots to create a task or scenario flow for demonstration in context of the device. However, if you want to do more advanced things, (e.g., locking a reduced menu to the top of the screen on scroll/swipe), you may find yourself limited.

In addition to a presentation platform in device context, my team and I use it for what we refer to as the “Thumb Test.” We’ll upload screen comps into Invision, create hotpots, transitions, then shoot the designs out to our smartphones or tablets to see how the designs “feel” in context of an actual device.


protioiologo
Proto.io
 
becoming a team favorite because it offers features for both user experience and creatives. It offers layer-based tools with action, motion and minute control without requiring code knowledge. You can either upload assets and/or use the provided libraries. While it can be a little confusing getting used to the Proto.io nomenclature, once you’ve got it down it’s fairly straightfoward and streamlined.

marvelLogo
I just started playing around with Marvel and my first impression is pretty positive. My team and I equate it to a free version of Invision, but it offers more in the way of features and capabilities to demonstrate more advanced ideas. The jury is still out, but my team and I are feeling good about using this one.


For low-to-high fidelity interactive wireframes and/or vetting a particular concept or patterns:

protioiologo
Yes, I’ve listed Proto.io twice.  I’ve started using Proto.io to quickly vet IA and patterns on the fly to make sure the recommendations I’m making are solid, such as scroll fatigue in a product catalogue and associated calls to action. I’m able to quickly create a screen and then publish it for viewing on a particular device.

Proto.io is very similar to Invision, in that it requires zero coding and is easy to start using, but I’m of the impression that Proto.io is charging ahead with more advanced animation prototyping, adaptive capabilities, Sketch integration, and other features that currently Invision makes difficult or unwieldy.

uxpin
UXPin
 is a fantastic wireframing tool. It’s like a friendlier version of Axure and the libraries are PHENOMENAL. It’s has a relatively low learning curve, and asset editing is done in context. I use it to quickly vet content (images, text, buttons) at various breakpoints because UXPin dynamically displays the changes. The styling and animation features are really good too.


For hi-fidelity prototyping needs, such as user testing:

axurelogo+copy
Axure is one of the most widely used original wireframing and prototyping software tools. I’ve used it off and on, depending on project requirements, but am not a “super-user.” Axure is a program that requires planning and thoughtful use; you just don’t inject Axure into a process arbitrarily. There can be a relatively steep learning curve if you need to go beyond click-through mockups into rich prototypes with conditional logic and dynamic content.


macaw
Macaw
is another program I just started playing around with and liked so much I invested in it almost immediately.  It’s like “dev-ing” in photoshop, and vice versa, so it’s a good idea to acquaint yourself with HTML and CSS (or reacquaint yourself, if you’re a bit rusty like me). What I am thankful for is the fluid grid testing it allows me to do – I create my initial grid and it does the math for me at all the other breakpoints I set. With a little more use, I’m certain to uncover more gems in this one, it’s looking really good.


 

Summary
Like I stated in the intro to this post, I haven’t gone out and tried every wireframe and prototype tool out there. The programs listed above are what I’ve been using in my projects and team processes. Naturally, the competitive nature of these tools means iterations, features, and improvements. As well as new tools. Today’s tool may not be in the tool box tomorrow. It’s not difficult to try and test what’s out there – just remember there may be no “one” tool or program you use.

Make this banner go away

This isn’t a real blog “post” – more like a UX rant.

While checking out the pttrns.Beta site, I encountered a banner for “iPhone 6 Mockuuups.” And I continued to encounter it as I scrolled the page up and down.
Resizing the window didn’t keep it from obscuring the page content (I hoped it would shift out to the margins). Clicking on the banner itself and returning to the page didn’t remove it either. I tried grabbing it (which I could) and pushing/dragging it off the screen (nope.)

Yes, I looked for a close button.

Is there some new advertising model I wasn’t aware of? Is this a Beta site thing?

Whatever it is, it’s cruel.

Grrrrr.
Grrrrr.

Tiaras aren’t just for royalty (or pageants) anymore

A recent NY Times article, Are Tiaras the New Power Scrunchies?, and a second article on Jezebel.com, How to Choose the Perfect Business Tiara, highlight the tiara as the latest power accessory; completely acceptable as part of a woman’s business-wear ensemble, and not to be taken lightly when selecting and wearing. Yes, there are rules about wearing tiaras; whatever it takes, embrace your personal glitter power.

In the spirit of the Holiday Season and the 3%, I give you my possible tiara choices. Enjoy.

Bespoke 1920's Style Headband by StanAndMay on Etsy
Bespoke 1920’s Style Headband by StanAndMay on Etsy.com

 

Simple Crystal Bridal Headband by EdenLuxeBridal on Etsy
Simple Crystal Bridal Headband by EdenLuxeBridal on Etsy.com

 

Greek Goddess Laurel Leaf Tiara by AnneMarguerite on Esty.com
Greek Goddess Laurel Leaf Tiara by AnneMarguerite on Esty.com

 

 

Captain Obvious I am not.

Captain Obvious I am not. 

It only recently occurred to me that there are two, well-known, UX professionals with nearly identical names. They both contribute frequently to A List Apart and UIE. (For those of you in the industry, you know who I’m talking about.) 

Stephen Hay: is a front-end design and development consultant based in the Netherlands. He is the author of Responsive Design Workflow (Peachpit/New Riders 2013), a contributor to Smashing Book #3, and a frequent speaker. 

Stephanie “Steph” Hay: is a content and UX consultant whose clients include Happy Cog and UIE. 

The New Virginamerica.com

I’m probably a little late to the party (better late than never), but I wanted to briefly mention the newly unveiled virginamerica.com. The Beta site came out earlier this spring, generating lots of commentary and speculation about its approach.

Essentially, Virgin America took everything off the home page in order to shift focus to the booking process in a fully responsive website. VA looked at their site analytics about how people use the site and determined that people primarily want to book airline tickets. Book ’em.

The beauty of the new site is its inherent simplicity and the fact that the screen is dedicated to helping the user make one decision or choice at a time. Instead of a website, it feels like a web app. The process is so transparent it more or less fades into the background.

virginamerica.com home page.
Home screen – desktop
Home screen - mobile
Home screen – mobile

 

Upon arriving at the homepage, the site uses geolocation to determine my current location and shows me only the destination options available to me based on my location. (Naturally, I can override the current location in case I’m not going to be flying out of Seattle.)

After each selection, the page scrolls down to the next section (number of adults, departure date, arrival date, etc) while the booking information is displayed at the top of the page where the information is locked. The site responds quickly to each choice with a quirky, VA style, easy to read summary of my selection followed by instructions for the next section. Additionally, the top of the screen keeps a running tally of the cost of the tickets.

Screen Shot 2014-07-15 at 1.44.49 PM
Seat selection + traveler info – desktop

 

Seat selection - mobile
Seat selection – mobile
Traveler info - mobile
Traveler info – mobile

 

I can easily go “back” by scrolling up the page or using the omnipresent left arrow indicating the previous step.

Inputs and fields are designed for touch with finger tip/finger pad sized dimensions (at a minimum).

An interesting flavor of criticism of the website has been around the functions the site can’t or won’t do. Which reminds me vaguely of the criticism Steve Jobs/Apple got when the first iPad was unveiled. People complained that they couldn’t put Word on it. Which was the point. The iPad wasn’t intended to be a computer. And look where we are now.

Kudos to Virgin America for flipping the industry on its head. I just wish I had somewhere to fly to.