Human machine interface - Vehicle UX

Microsoft Design

Microsoft has been producing some excellent visualizations into the thinking behind their software lately. I love this new Microsoft because the message and principles behind the work they are doing are clear to the consumer of their software. They still lack the level of detail that Apple communicates consistently, but these are significant steps in the right direction for there business.

More can be seen at https://vimeo.com/microsoftdesign

Mobile Nav could be costing you half your user engagement

So, you have a mobile app where there are more pages or sections than can fit on a mobile screen at once. Your first thought might be to create a tabbed design, with a row of tabs along the top or buttons along the bottom.

But wait… that extra row of tabs or buttons wastes a lot of valuable real estate on a small mobile display, so let’s not do that. Instead, let’s move the options into a side menu, or side drawer, as our Android team keep reminding me it’s called.

If your mobile app has multiple views then I would be surprised if this subject has not been vigorously debated by your team:

1. Persist all the navigation options on screen at all times so your users have clear visibility of all the main app views and single-click access to them.
2. Or, free up screen real estate by moving the options into a side menu.

The side menu has become fashionable on Android but not yet taken off on iPhone… and so another factor that enters the discussion is the desire for your Android and iOS apps to have similar navigation and user journeys, or not.

I thought it worth sharing our experience.

Usability vs. clean design

When we first started zeebox, we began with a tabbed design with a row of buttons along the top. Our reasoning was simple: “Out of sight, out of mind” – i.e. if you don’t see the set of available options then you’re not going to know that they exist.

For example, in the above images, if you don’t see a GUIDE option then how would you know to go to the menu to look for it? And if you discovered it once, would you remember that each time you returned to zeebox? Even if you did, it would be two clicks to get to the guide rather than one.

On the other hand, the design looks so much cleaner without that ugly row of buttons along the top, moving the navigation into a side menu really lets the content breathe.

The idea of moving app navigation off-screen into a side menu – also known as a hamburger menu or navigation drawers – seems to have originated about 18 months ago.

Around Sep 2013 Facebook switched to a new side menu design – or at least my Facebook app did as part of its A/B test. Surely if Facebook was doing this, then it had to be good… right?

The friendly and wonderfully helpful Google Play team suggested thatnavigation drawers (which I’m referring to here as a side menu or side navigation) were the new way to go and would be the preferred design pattern for our Android app.

And so about six months ago, we decided to take the plunge and switch to a side navigation. To make sure people knew about all the available views and options we had the app start up by showing the navigation drawer open:

When we launched the new version the user reviews were great (“Love the new design, 5 stars”).

But when we looked at our analytics, it was a disaster! Engagement time was halved!

It looked like “out of sight, out of mind” really was the case.

The surprising truth

After realizing the gravity of the situation, we rushed out an update two weeks later that restored the top navigation as the default. We also provided a settings option that allowed users to turn on side navigation if they preferred so as to not upset those people who had loved the new side menu.

Anyway, cut to six months later.

The zeebox app has really come a long way in those months, we have a new My TV page that’s a constantly updated personal feed of news, TV shows starting for you, and posts for shows and from people you’re following. The My TV page is the place that our users want to see. But we wanted another go at letting the content breathe, so it was time to try that side navigation experiment again…

However, having learned our lesson, this time we’re going to do it the smart way: we’re going to A/B test it.

Our favorite A/B test tools and methodology

Lately we’ve become big fans of A/B testing, both with users coming into the office to test interactive Flinto prototypes and with A/B configuration built into our production app.

We start by creating mock-ups of various design concepts. We use Flinto to turn those into interactive prototypes that look just like the real thing, but which are built and iterated in minutes or hours.

You can see a couple of our Flinto prototypes here and here – click the links on an iPhone for best effect. Tap an hold anywhere on the page to see where all the interactive hotspots are, then tap on a hotspot as if you’re using the real app.

We advertise for users who love TV, anything from The Voice to Downton Abbey. Twice a week we have four to five people come by our office to our virtual lounge where they try out the various concepts and prototypes we’ve prepared.

Sometimes you’re able to get a clear design winner from that small user sample. But in other cases, like for side navigation, you really need to sample thousands of people using the real app. And for that you need A/B testing.

For mobile app A/B testing, we use Swrve – it’s the most sophisticated A/B testing product I’ve found. It provides not just useful features like Goal Seeking (the A/B test server can automatically switch all users to the best option once a clear winner has been determined) but Swrve also lets you serve customised experiences for every individual user.

For example, if you’re a Comcast subscriber and we notice that you haven’t yet discovered that zeebox can act as a remote control for your Xfinity box, then Swrve could instruct the zeebox app to pop a message telling you  about that, with the timing of the message adjusted on a daily basis for optimal effect.

Anyway, we decided to go with a 15/85 test, where 15 percent of users were served the side navigation and 85 percent got the top navigation.

We launched the new version, waited 48 hours, checked the stats… would things be different this time…

The answer was a resounding No.

Weekly frequency was down. Daily frequency was down. Time spent in app was down. The side nav was as big a disaster as the first time round.

The good news is that, thanks to A/B testing, this time we could simply flip a switch on the server and set 100 percent of users to top navigation.

Given that the discussions about top or side nav are very likely a topic of debate in your company, I thought it worth sharing our experience.

Back when we did our above A/B test and concluded that the side nav was not for us, Facebook launched its new navigation on iPhone, with a persistent bottom navigation on every page. So, on iPhone, the app has a persistent lower navigation.

However, on Android it’s, well… variable. Looking at Facebook on my Android phone (below left) vs. on my colleague’s phone (below right), Facebook must be A/B testing this right now as some people are seeing top navigation and others side navigation. I’d love to know what Facebook are seeing in terms of engagement with each…

When does side navigation ever come into play?

My take-away from all of this is that if most of the user experience takes place in a single view, and it’s only things like user settings and options that need to be accessed in separate screens, then keeping the main UI nice and clean by burying those in a side menu is the way to go.

On the other hand, if your app has multiple views that users will engage with somewhat equally, then side navigation could be costing you a great deal of your potential user engagement, and interaction with those part of the app accessed via the side menu.

Source

How bottom-up product design liberates designers and delights users.

We are on the cusp of a major shift in how product designers approach their jobs. The legacy method is to spend a lot of upfront time concocting a formal strategy and identifying “user needs” before getting to work building something, a top-down process that is time-consuming and costly. An alternative—and increasingly accessible—method is to focus on synthesizing individual elements and features of a product from the bottom-up, ultimately discovering new use cases that could drive a viable business strategy. If the traditional approach is “macro UX,” the new one is “micro UX.”

The best example of bottom-up design—micro UX—is building with Legos. The designer uses predefined units and works with them as starting points to create something new. In designing digital products, we similarly leverage specific technologies, gestures and features of different devices to build something without worrying about the overall strategy. With each iteration, a cohesive product takes form, and using real-time usability testing, designers continue to tweak that new product until users love it. This open-ended process might spook some clients or traditional practitioners, but it’s what’s beginning to separate truly great product design from merely adequate design.

Why micro UX now?

For the last few decades of digital product design, we’ve taken the macro UX approach. UX pioneer Don Norman was an early advocate of focusing on user needs upfront in the process. But something has changed in recent years (in fact, Norman himself repudiated the existing paradigm in a provocative essay called “Technology First, Needs Last,” in 2010). There are several big factors at play for the shift:

• Increased access to better and cheaper technology, from Arduino to smartphones and tablets to sensors.
• More immediate and deeper global knowledge networks, from coder forums to stackoverflow.com.
• Easier ways to test product iterations relatively cheaply, from KickStarter to the App Store. 
• Real-time tracking tools, from online surveys to eye tracking costing less than $200 to widely-available cursor trackers. 

These converging developments make micro UX low-risk and liberate product designers to experiment and play with small features (designer and micro UX evangelist Dan Saffer calls them microinteractions) that together affect the user in myriad ways and constitute her experience. 

When is micro UX best? 

Micro UX will not—and should not—entirely supplant macro UX. It works best with smaller, informal teams, smaller budgets and smaller products in general (though not exclusively). Other scenarios:

• Designing experimental products with no predefined audience. Take Jelly, the app that lets users take photos and attach text messages. The way users use Jelly is still evolving, but these uses are triggers that could help the company determine its identity later. 

• Designing an insurgent product aimed at taking out incumbents. When Facebook was still just becoming the behemoth it is today and competing with MySpace, it focused on small details like incorporating JavaScript so the user didn’t have to refresh pages constantly, like they did on MySpace. While several, complex factors contributed to Facebook’s ultimate success, micro UX played a role. Similarly, Tinder, the wildly popular dating app, is built on top of a simple swipe gesture that only makes matches when both parties accept them. The micro UX of Tinder has helped the startup supplant larger, more established sites that built services based on preconceived matching algorithms, like Match.com or OKCupid. 

• Refreshing an established brand’s digital presence. For companies with successful, existing digital products, updating the design with a micro UX approach helps keep the focus on incremental, user-focused improvements. For example, TED.com’s recent redesign boasts several smaller adjustments that provide delightful moments, like smarter, more intuitive pull-down menus when there are many options to choose from (full disclosure, Huge worked with TED on the project). 

Marrying macro and micro UX?

Of course it’s possible that the best way forward is to adjust how traditional macro UX works informed by micro UX best practices. Designers and strategists/researchers would work together from the outset, with the latter doing audience research in parallel with the former’s iterating and real-time testing. Together, they would validate the evolving product design. This approach would let user needs, as determined by research, align with actual user use, as shown by testing. 

The advent of micro UX is exciting for both the designer and user. The designer is now able to incorporate a broader skill set—coding, visual design, psychology—in his quest to build the delightful moments that together make up the micro UX of a product, not to mention observe the impact of each iteration on actual users and adjust as necessary. The user is about to experience a host of products designed to make her life easier and much more fun. Source

We should clone game Interaction Design tools.

Previously, I wrote about the state of Interaction Design tools. It’s prettypiss poor if you ask me. I’ve been penning down endless pages of tool ideas over the years, and I’d like to share some with you.

DISCLAIMER, I’m publishing this in a hurry. I want to start helping people make these tools, instead of just writing and talking about something theoretical. Sorry if this is somewhat scrappy.

---

My friend Wilson Miner’s tweet reminded me of some ideas I’d been logging.

We really should be borrowing concepts from game & animation tools, to make interfaces. In many 2d & 3d packages, we can do things like simulate a whole fucking waterfall, but in the few design tools we have, we struggle to move primitive shapes around in space. It’s a joke!

Here’s an excerpt from an email I sent around to a few bright engineer friends that enscapulates my thoughts on future tools.

---

The big breakthrough in thinking that I had for animation/interaction tools is: It exists already, but applied in a different context. 3D animation / simulation for film & games. In a typical game/animation studio, there’s usually a core package being used by the whole team. In most environments I was involved in, the package was Autodesk Maya.

The production flow looked something like this:

Modeling Tools

Most of these tools exist in the master viewport. You can pan, zoom & orbit around an object and perform operations on the polygon & NURBS objects. The tools exist in a toolbar and let you do things like extrude faces, chamfer edges, scale things, split poly faces, mirror, etc. All tools around virtual sculpting really.

Rigging Tools

Rigging tools. Some native, some made just for this puppet.Hypergraph Editor

As well as using the master viewport, riggers (who take the models and put the skeletons & handles into the puppets) use a tool called the Hypergraph, which is really just a node editor with connections.

Animator Tools

A GUI for observing direct feedback (posing, watching playback)Graph EditorRegular timeline hybrid view (key ‘ticks’)Dope Sheet (more like classic cell animation timing). Dope as hell right?

The animators would take the puppets from the riggers & manipulate them with a number of tools. Most times it was timeline based.

Dynamics/simulation/FX

Particle simulation

This pass is done by artists with more of an engineering+art background. They use a combo of the GUI, prebuilt physics behaviors & code to make stuff like fire, water, cloth, springs, etc work. In editions of Maya Live, you can interact with the simulation as it plays back. This is common for blocking out simulations without having to dial in numbers, and to test simulated animation which might need to always be dynamic (game animation for example!). Some of this is driven by keyframe animation, some of this modifies keyframe animation, and some of it is completely dynamic!

Lighting/Texturing

Usually more steps, but for simplicity’s sake — we also have a node editor JUST for lighting & creating textures. It’s ‘procedural’

Melscript. On a windows machine. Weird.

So the interesting thing about all of this, is that all of these operationswrite to an ascii file. In Maya, it’s called a Maya ASCII file. Inside the file is a bunch of MEL commands. If you’re familiar with MEL, you can write a whole scene with it.

All of the tools I mentioned above, create meaningful lines of code, which can be operated on because the file format is very open. At the end of the day, a rigger, a lighter, an animator, or an engineer are using tools built for their specific tasks, but all share a common format. This is extremely helpful, because a file will be pushed up and down the pipeline between departments. Sometimes animators will adjust rig properties. Sometimes engineers will need to tune animation curves. Changing tools is a simple matter of picking which ‘workspace’ you’d like to use. You can even create your own specialized workspace, and most people do!

So how could this work for interface animation / interaction design?

A good tool for interfaces would borrow a lot of this thinking, but have amuch more narrow set of tools. I can imagine simple tools for working with layout, tools for putting down animation curves, dynamic connections between objects, simulation, etc. It seems like a lot, because the thing that inspired the idea is huge. I think it could be stripped back to 5% of what something like Maya is. After all, the animation problems being solved in interfaces are much wimpier than say — simulating a waterfall splashing on rocks, underwater hair, or even a fist deforming a face’s vertices as a result of a dynamic punch.

Probably one of the most raw ideas I have, but I wanted to share it with you in detail first. I want to more formally collect it all in an article. I’d love to hear your thoughts.

---

I didn’t really formalize it like I would have liked to, because it was too large an endeavor for me to wrap my head around… but that’s not the point. The point is that we have so many clues & so many things we can borrow. Traditional software design tools need to catch up to game & animation tools.

More thoughts to come.

Source

The state of Interaction Design tools

The current state of tools is decent, but how they fit together is less than ideal.

• Pasquale D’Silva in Creative Idea, Product Design, etc

Pull up a chair & get your butt cheeks comfortable, because this will be a comprehensive mind explosion.

Animation is really, bloody hard. Furthermore, the idea of using animation in the context of interactive design is really new for many seasoned designers. As I see more people warm up to the concept of Transitional Interfaces, I get excited, but equally frustrated. The tools are still not good enough.

My background in animation gives me the advantage of software tool knowledge, which I’ve learned to transpose over to interface thinking… but most designers don’t come from this background. As a result, it’s harder for designers to explore the fundamentals of animation. Their animation looks malnourished standing next to their outstanding static design efforts. Designers end up using wonky tools, sucking them into making generic, stiff, & mushy spring-physics driven garbage (yuck!). At the other end of the spectrum, the tools built for traditional animators are complicated power-tools for a different scope of problems, with an unfriendly learning curve.

We currently have a few major schools of thinking. They roughly fall into 3 categories: Timeline, Signal Flow & Code.

Timeline

A linear approach to animation — and the purest form. Much of timeline animation is designing states, then wrestling with a computer to design the inbetweens so it moves with a designed intention. Good timeline animation is designed animation. It is not left to the whims of a computer to simulate sensible & pleasing animation timing. It is controlled & opinionated, but comes with the cost of being non-dynamic. It’s great for illustrating the result of basic interaction, without spending the time fooling around with the intricacies of capturing a plethora of events. Wiring up the subtleties of dynamic animation makes no sense if the foundation of timing is off. In a linear method of thinking, the inherent focus is the animation timing and not much else.

Adobe After Effects

After Effects is an extremely powerful package, but is fundamentally built for video, motion graphics & compositing work. This creates The PhotoshopKitchen Sink Effect™where the new user is punched in the eyeballs with an interface full of mostly irrelevant horseshit, that is not useful for anything. Once the user learns they only need 20% of the tools, they stop crying themselves to sleep at night like a little bitch. (That was how I learned After Effects)

Once you get over the overwhelming interface, making a composition is lightning fast, because you are immediately designing animation, with little, to no rigging. It doesn’t have to function. It doesn’t have to have logic driving it. It’s just the essence. Handing off a video render to an engineer who has basic animation understanding can get you pretty far for many common animation/interaction patterns, but not so much for ideas needing tactile interface feedback.

Adobe Edge Animate(it’s pretty terrible)

Some timeline tools do some basic triggering of timeline chunks based on conditional triggers, but the animation timing tools are weak and they spit out horrifyingspaghetti code.

---

Some of these tools include:

• Adobe Edge Animate
• Google Web Designer
• Hype

The new timeline tools seem be missing the point. They all seem like watered down versions of Flash. As Paul Neave reminded me, the Flash era of design was a magical time which we’ve lost. Front-end developers got balls-deep in ActionScript, working in tandem with a timeline interface. We ditched it because we wanted to say farewell to a proprietary runtime, but not because of the workflow. When Flash died, so did the ideas around blending manual animation with code.

---

Signal Flow

Signal Flow produces an almost infinite number of dynamic outcomes.

---

In node based design, we design the infinite outcomes. It’s designing the graph of possibilities rather than what one possibility should feel like (a linear approach).

Quartz Composer

Signal Flow lends itself to thinking in a context of things like conditionals, iterators, toggles.

---

Moonbase — An animation tool I worked on, which attempted to reboot the node paradigm. R.I.P!

We’ve seen a huge push towards using simulated interaction tools such asQuartz Composer. Facebook Home was a significant leap in the direction of using a Signal Flow approach to designing interactions. The result is a new world of playful, and responsive animation, driven by user input.

However, in thinking about Signal Flow, one cares less about designing with good animation timing, and more about tuning knobs and dials to get a simulation right. Is this bad? To me, it’s zooming into specific, tiny details early on, rather than considering the generality.

Dynamic animation is strengthened by a foundation of good timing to drive it. Springs can be beautifully simulated, but if the underlying animation driving them is poorly timed, the whole thing falls apart. It’s a little too close to implementation than it is to design, and can be a trap to spend time towards early on. As designers fumble around with dynamic tools, I’m seeing too much simulation, and less opinionated articulation that is designed. The result is a clumsy interface with over-animated action that’s distracting. Signal Flow is powerful, but it’s just one piece of the puzzle.

Code

Framer by Koen Bok

---

If you haven’t played with Framer, I thoroughly endorse it. As someone who prefers to work visually, Framer does a pretty decent job at giving me live feedback when writing JavaScript. It’s probably the only code-based tool I’ve been ok with wrapping my head around. There’s a ton of great little helpers to create animation patterns, nest things in parent/child views, etc.

Framer is great, but it comes with the high cost of having to switch mental context, away from directly manipulating objects in a spatial plane, and into the abstracted world of a DOM. You don’t get to design animation, but you get to design events. Unlike Signal Flow, you can easily define logic blocks and think in terms of OOP. Good for designers willing to wrap their head around engineering concepts, but not so much for the ones without engineering chops.

Writing code can be cumbersome when trying to solve a visual problem. It’s a big challenge to take vivid, organic ideas bouncing around the human brain, and express it with the terseness of code. It’s more natural to think about solving a visual problem in a visual context.

This other thing which doesn’t have a name

A concept for a Better protyping tool by Colm Tuite

http://www.colmtuite.com/a-better-prototyping-tool

Klik & Play

There’s also this context of thinking which doesn’t have a name yet. I’d love to know a good title for it. Perhaps an “Event Editor”? I fondly remember building games in a similar mode of thinking using Klik & Play back in Junior School. It was an expressive and easy way of describing something very complex.

---

So where does this leave us? Well we have a variety of contexts to think in, but no common bridge to connect the ideas together. Some problems are best served to be solved in a specific context, or a combination of contexts. We need to consider the option of using a spectrum of complementary tools, rather than just one. We don’t need a new hammer, we need a toolbox.

…To be continued. Like super soon. I’m digging up an old email I wrote that outlines what I think the solution is.

In the meantime, chat to me on twitter: @pasql or email: animation@psql.me

EDIT: Here is part 2. We should clone game Interaction Design

Source

Hamburger vs Menu: The Final AB Test

In case you missed this post about an AB test on mobile menu icons, make sure you check out the comments. There are some very interesting insights about A/B testing and its shortcomings.

The post went a tiny bit viral, and suddenly it wasn’t just my mother reading this blog.

Three things I learned:

1. This iconhas lots of names: hamburger, sandwich, and even hotdog ?! What it actually is, is a list icon. We’ve just co-opted it to mean a navigation menu.

2. When something gets noticed, some people get a little mean (source)

3. One commenter said I was the Dunning–Kruger effect in action. This phenomenon is when you try to sound clever but are actually a dumbass.

Thanks for the vote of no-confidence.

In this hyper-connected world full of rockstar developers and super-smart designers, I’m humbled on a minute-by-minute basis. I might need to start attaching positive affirmation stickers on my laptop.

The Final Hamburger A/B Test

I do enjoy A/B testing, but conclude what you want. I’m not an expert, nor am I advising anything, but sharing what happened on a single website.

Using a commercial A/B testing service can get very expensive very quickly, and well beyond the budgets of small-time web designers and developers. So, hopefully, these posts are helpful for some of you.

If you are using social sharing buttons, you might find these tests interesting.

Variation 1

Bordered list icon (hamburger).

Variation 2

Bordered word menu.

Results

240,000 unique mobile visitors were served the A/B test.

VariationUnique VisitorsUnique ClicksHamburger1205431211Menu1211521455

The test was large enough to achieve statistical significance.

The MENU button was clicked by 20% more unique visitors than the HAMBURGER button.

Where things get interesting is when we break down the data a little:

Unique VisitorsHamburger ClicksMenu ClicksiOS1480979060.61%11430.77%Android872452160.25%2370.27%

There is very little difference in the Android user preference, but their lack of engagement is disturbing.

Interpretations

Hamburger icons may appear to be ubiquitous, but they are not the only option.

There is an issue that is much more important:

Android users are almost 3x less likely to click a navigation button than iOS users.

Why?

Caveats

• These are the results from one website (see more about demographics here).
• The test was done using some in-house code, so I cannot guarantee the perfect execution of code across all devices. I do not have time or capacity to rigorously test code like the big commercial AB testing services like Optimizely. Bear in mind that to run this test with Optimizely would have cost $859 (I kid you not).
• I can’t measure intent with this test. I’m measuring clicks on a webpage. Maybe the user thought menu as a list of food to order. Maybe they wondered what the hamburger icon was and tapped it. Who knows. AB testing cannot tell you this.

Source

Secret Ingredients to an Unforgettable User Experience

User experience (UX) is an important facet of website development, though, it is often neglected. The reason is that most web developers focus on the technical features of the site. However, when one forgets to build a website that is easy to navigate, the user tends to shift his or her attention to other websites and would not ever come back.

On the contrary, when a website is well-thought of, a favorable and long-term impression is created, together with the preference of your website over that of the competitor’s. It is in this reason why it is pertinent to plan and prepare the experience a user will have when they browse through your website.

You need to consider if your site will provide the information a user needs as well as how your site is able to provide the information. Truly, you can never tell how this tiny and often ignored detail can gravely influence the views of your users.

To address this concern, let us look at the essential UX tools that can help us achieve an unforgettable and lasting user experience.

Maps and Charts

This is the foundation of everything, even in areas not concerning web design. You need to have a goal and a way to attain it.

Why maps are needed:

• A project will be left astray without having a sound and foolproof plan.
• Without a plan, you will be lost; you will tend to go in all directions like a hiker who opted to walk in the woods instead of the tracks. 

Planning will give you the following benefits:

• Be able to determine the goal of the website
• Develop a flexible design that works on your target audience
• Maximize reusability of the web site through appropriate use and reuse of web pages

Planning tools like mind maps, flowcharts and sitemaps are great tools that you will need for guiding your goal.

• Mind maps and flowcharts are effective in organizing your mind and filing each plan in a way that you can ‘see for yourself’ how your plan would work.
• Sitemaps can utilized when defining the navigation structure of a website.

Concept Draw

Concept Draw is a powerful tool for diagrams as it provides you with flowcharts and mindmaps both on Windows and Mac. It comes in three programs, namely:

• Concept Pro 9 - gives you diagrams and charts, vector illustrations and maps
• Concept Draw Mind Map 7 – allows you to do mind mapping, brainstorming and presenting
• Concept Draw Project 6 – has features like Gantt charts, project and resource planning

Xmind

XMind is an open source project by Lifehacker.com. It is the most popular mind mapping tool that offers the following features:

 Features:

• Local Network Sharing – helps you to communicate better with your teammates via LAN.
• Export to MS Excel/CSV – you can start the plan via XMind and export it to Excel for task management.
• Export to PDF/EVG as vectors – maps are always printable in any scale.
• Useful templates – there are loads of useful presets; you won’t worry how to start your plan.
• Beautiful markers – differentiate thoughts and ideas with style.
• Clip-art – another way to design your plan.

Gliffy

Want a professional-looking flowchart, diagram, floor plan or technical drawing? You can do that all in your browser using Gliffy!

Features:

• Drag and drop interface – combines the power of a desktop software with the lightweight and easy to learn browser based application.
• Compatible via Mac or Windows – you will never worry if the program works for your OS; as long as you have an Internet connection and a browser, Gliffy can run in your computer.
• You can also share your work with others

OmniGraffle

OminGraffle is a great iPad and Mac OS X tool for making eye-gasmic graphic documents. It provides you with great styling tools. It even organizes your diagrams in one click. You can now create flow chats, diagrams, UX and UI interaction and more!

Features:

• Document syncing – allows you to share your files with other users
• Comes in with GraphViz Layout Engine – you can do wireframes
• Has great graphic tools like lines, shapes, templates and custom stencils
• Can do multi-page, multi-layer and multi-canvas documents,which can all be stored in one Graffle document
• Has Presentation Mode – you can easily relay your proposals to clients and workmates.

Wireframes and Prototypes

Prototypes allow you to work on building elements, positions and design before moving further on the development. This will save you a lot of time as it will give you a clear goal of the design before the development phase.

UXPin

UXPin offers a new way of prototyping websites and iPhone apps. It is a complete system for designing user experience with collaborative app for wire-framing and paper prototyping.

UXPin is used by the people from Google, Apple, Microsoft and IBM. It has earned reviews by Wall Street Journal and The Next Web.

Features:

• Uploads UX and project files such as Model Canvas and Project Canvas 
• UI design
• Collaborative work in real time – no more emailing to team back and forth
• Visionary wireframing and protyping tool
• Easy UI design process 

Power Mock Up

Did you know that you can make mock ups using MS PowerPoint? Oh yes, you can! Using Power MockUp, you can sketch your wonderful ideas without the hassle of learning a new software.

Features:

• Create designs using hundreds of stencils and icons
• Stencil library – provides you with a wide variety of templates for all the typical elements of a website design or application
• It works with PowerPoint 2007, 2010 and 2013, both 32 and 64-bit

Balsamiq

Balsamiq offers fast and functional way of prototyping websites and apps. It is not inexpensive, yet it provides plenty of revenue to your business.

Features:

• Drawing is easy using the four major blocks (Application bar, UI library, mockup canvas, file browser)
• Team members can come up with a design and iterate over it in real-time in the form of a meeting.

Balsamiq price varies depending on the versions you need. You can check the pricing here.

Invision

Transform your designs into high-fi prototypes both for web and mobile interfaces with Invision. This powerful tool is integrated with Photoshop, Fireworks and Illustrator so you can use it whatever platform you might want to.

Features:

• Upload images and use hotspots to create interactions like a real app does
• Send the link of the project to your client so that you can get their own say about the app or site that you are developing

Wireframe Sketcher

WireframeSketcher is an offline desktop wireframing tool that comes with fast and native UI on both Mac, Windows and Linux.

Features:

• Standalone application but also acts as plugin-in for any Eclipse IDE
• Cross platform and has a native fast UI on Windows, Mac and Linux
• Built-in refactoring lets you rename and move files without breaking links
• Flexible UI lets you work on multiple monitors
• Extensive library of UI controls
• Flexible wiki formatting (style any widgets that supports text)
• Large set of vector icons
• Storyboard use cases

Notism

If you’re into collaboration, Notism is a recommended tool for you. For one, it lets you obtain and share designs efficiently. You can also create interactive prototypes, and notes, discuss these prototypes and be notified about it in real-time.

Features:

• Upload and share design work with your team members easily
• Works with your favorite design tools like Photoshop, Fireworks and Illustrator
• Receive live feedback from team members
• Comment in realtime via Sketch
• Create working prototypes of your static design templates by setting up hotspots and linking screens
• Add to-dos lists

Mockingbird

GoMockingbird is a web app that makes it simple for web and app developers to create, link together, preview and share mockups.

Features:

• Drag and drop UI elements to pages, rearrange and resize them
• Link users to multiple mockups screens, allowing them view each others work
• Share link to team members and clients in real-time
• Export mockups to PDF or PNG files

Creately

Creately is another useful wireframing UX tool. Aside from the wire-framing features and mock-ups, you can use it to draw flowcharts, mind maps and many more diagram types.

Features:

• Sharing diagrams with other users
• Great diagram customization
• Font and object can be altered in variety of ways
• Text can be turned into links

Indigo Studio

Indigo Studio is one of the fastest and newest prototyping and interaction design tool. The tool itself is interesting in that it has two modes of working: screen and storyboard.

Features:

• Designing prototypes for mobile devices
• Full support for any device that runs HTML5 including iOS devices
• Utilize supported touch gestures and documents designs through these new features

LucidChart

Lucid Chart is another great tool that provides collaborative online diagramming. It draws flowcharts, organizational charts, wireframes, UML, mind maps and more. It is a web-based, visual thinking application that has unlimited number of ways to create diagrams in real time.

Features:

• Enterprise-level security and admin controls
• Import and export Microsoft Visio documents
• Intuitive user interface and seamless collaboration

GUIToolkits

GUIToolKits is a prebuilt tool for everything from web to mobile devices. It is the next major UI template released by Amir Khella who also brought Keynotopia. GuiToolkits is apparently the largest collection of user interface in the planet.

Features:

• It’s loaded with UI components of various platforms such as Android, iPad, iPhone, MacOs, etc.
• You can create wireframes and turn them into high fidelity pixel perfect prototypes by switching the UI component style.

Pidoco

Pidoco is a web-based prototyping software for rapidly creating clickable wireframes and UI prototypes for web, and other applications. It’s easy to use with its smart sharing and collaboration features, a convenient specification generator, exports and much more.

Features:

• Design prototypes as simple as playing blocks
• Ready to use once you sign up
• Rapid application prototyping
• Share work together other team members in real-time
• Get feedback real-time

FlairBuilder

FlairBuilder has the tools you need to wireframe a website or iPhone apps. There are a lot of built-in widgets to get you started from having simple page-to-page links to more complex functional interactions tool.

Features:

• Simple and easy to use
• Wireframes are organized in pages
• Instant Site Map (Site Map View)
• Easy to add comments to your pages

SimpleDiagrams

SimpleDiagrams is a small and simple software program that enables anyone to quickly describe their thoughts or capture business processes visually. Consisting of an elegant design and simple feature set makes it a perfect tool for business.

Features:

• Drag, drop and size symbols from libraries
• Add photos and post-notes
• Various background styles (chalkboard, whiteboard, etc.)
• Create multi-diagram documents with tabs
• Save diagrams on your computer
• Export your diagram to PNG and PDF
• Create custom libraries

HandCraft

Handcraft is a great tool to build and share better prototypes with HTML, CSS, Javascript, Coffeescript, LESS and Markdown. HandCraft is now available in Chrome Web Store. This means that if you use the Google Chrome browser, you simply install it and it will appear on your tab screen.

Features:

• Design in the browser
• Include state changes, error messages and alternate designs directly in prototype
• Support for HTML, CSS, Javascript, LESS
• Secure and Private Prototypes

FileSquare

FileSquare offers web-based tools for creating prototypes by linking uploaded mock-up images together. With FileSquare, you can simplify the prototype process with click-through mockups and collect feedback on your designs.

Features:

• Drag and drop screens right into the editor window
• Link up sketches, wireframes etc. quickly
• Track progress drill down into details

User Testing and Feedback

Feedback and user testing are important too. Once you have done the project, you will get actual users to use it. In this manner, they will be able to identify the possible errors and bugs so you can improve or troubleshoot them.

Forrst from Zurb

Forrst, maintained by ZURB, is a great resource for designers and developers who want to share their work and get feedback from others in their field. Compared with Behance and Dribble, Forrst generally works better if you want complex feedback instead of just recognition.

Features:

• Get feedback on your visuals
• Interactive discussion about the design project
  
• Get help from other developers
• Share design or developer concepts with your peers

Intuition HQ

Intuition HQ allows you to share user feedback with clients in a visual and simple manner. You can get results to show the things that work in your website and the things that don’t. This way, clients are being given extra value by offering them new and improved services. It’s like involving the clients without over-involving them.

Features:

• Test designs quickly and easily
• Share user feedback with clients in an uncomplicated system
• Add value to clients by offering a new service
• Improve leads, sales & your reputation for the user-centered design

Silverback

Silverback is a “guerilla” usability review application. This means you can review the feedback at at your own preferred time and place. It is a software that aims to empower people to develop applications. The best part of this is that it comes as ready-to-use, right out of the box.

Features:

• Capture screen activity
• Video the tester’s face
• Record the tester’s voice
• Add chapter markers on-the-fly
• Control recording with the remote
• Export to Quicktime

Verify

Verify gives you the opportunity to gain valuable input regarding your users’ expectations.

What does Verify do?

• It also provides reactions to your designs before writing a single code by uploading test screenshots.
• Your team will have an easier time in making design decisions.
• Fast in collecting and analyzing your feedback, it is also easy to use because you can set up your Verify account and start surveying in less than three minutes.

Features:

• Collect and analyze user feedback on screens or mockups via design surveys
• Collect data that informs your design decisions
• Create and share Actionable Reports
• Collect Demographics

Browserbite

Browserbite provides screenshots and report cross-browser results with differences. It comes with aprice but, on the other hand, it reduces testing time, making the whole process more efficient.

Features:

• Launch your site in many computer browsers
•  Take snapshots and compare these using patent pending algorithm
• Report visual bugs to the language you understand

PollDaddy

With Poll Daddy, you can easily create surveys and polls that suit your brand, budget and goals. It comes with an easy-to-use survey editor that lets you create surveys from 14-question types, ranging from multiple choices to free text.

Aside from that, you can view your results real-time as they are being delivered. You can even filter them to properly analyze your data and share them. Polldaddy also is customizable using CSS.

Features:

• Easy-to-use survey editor
• Powerful reporting and filtering
• Customized survey look

Five Second Test

The name itself would ring curiosity but, honestly, Five Second Test is a very simple tool to get feedback. This is a service that gathers feedback by asking its users to recall the elements of the website after they have fast-seen it in five seconds.

Features:

• This is a great method in gauging the attention-fishing capability of your website.
• It can reveal the strong and weak points in the design.
• It could be a fun way to check if your design is really attention-catching.

I quote,

“Fivesecondtest could easily get addictive. With so much UI feedback available so cheaply, you could try a much riskier UI & iterate.”

- Kent Beck, Three Rivers Institute

Usersnap

Usersnap is a screenshot tool for web development. With this tool, you’ll get annotated screenshots of the current browser content directly delivered to your bug tracker or project management tool. This tool helps you deal easily about the issues and share feedback between developers and clients.

Features:

• Enables Google analytics on pages
• Supports CMS platforms like WordPress and Joomla
• Works on all browsers

BugHerd

BugHerd is a web-based online bug tracker for web projects. It’s comprehensive feature set ensures the bases are covered from development all the way through to delivery.

Features:

• Simple bug reporting interface
• See visual bug reports on your website
• Kanban board for easy management
• Automatically capture client-browser information

Visual Website Optimizer

Visual Website Optimizer has a sleek user-interface and friendly navigation bar. Being a dedicated testing tool, it is also packed with options to provide more data- ideal for the marketer who doesn’t have advanced coding and technical skills. 

Features:

• A/B testing
• Multivariate testing
• Behavioral targeting
• Heat maps
• Usability Testing
• Revenue Tracking

Conclusion

So there you have it guys, the essential UX tools you need. I hope you’ll pretty much get the idea of how user experience is important in our field. Let it be known that without these tools, we’ll be lost. What do you think? Which of the tools is intriguing to use? Which of these services are helping you already? Let’s talk about it.

Source