Ramblings about Tech, Design and Life by
Andrés Max, a Software Engineer and UX Designer.
Popular Post » Getting Started With Wireframes
Jonathan Longnecker for .Net magazine discusses in this article about how boring a responsive layout is.
Weak article IMO, since he just talks about how css grids constrain your design.
Responsive is NOT boring, Grids are NOT boring, your designs are.
Beautiful, responsive (resize your browser, it adapts to devices) and soon to be behind a paywall.
Yesterday I made a post linking to an article on MSDN where the Windows 8 devs are showing off their new improvements to the Windows 8 Explorer. I thought long about this after I read the post, and I decided to make a few more remarks in hope this gets to at least one of the devs.
I’m not going to rewrite the article, you can read it for yourself here, the team basically explains a bit about how the Windows explorer interface has evolved from early Windows 1.0 up until the un-released Windows 8.
What They Measured
This is where we start to go downhill: First they focus on “power users” and how the usually install add-ons to enhance their UI, error #1. Secondly, they set up a test to see what the “Top 10 Commands” people use while using Explorer, this is actually pretty useful data, except they went about it the wrong way, which brings me to my next point. Third, they used the data to add in all of these commands to the Explorer toolbar aka “Ribbon”. Don’t get me wrong, I’m all into testing UI, gathering feedback and iterating, and they did this, and actually established a nice set of goals for their new Explorer: Optimize Explorer for file management tasks, Create a streamlined command experience and Respect Explorer’s heritage.
Dandy! But how on earth did we go from setting those goals to this:
I was just blown away, from all the data they collected on Explorer usage, the conclusion was to add in all of the top 10 commands at the same time, in the form of large icons, eerily laid out?
How is this an improvement form the Windows 7 interface?
Yes, I’d go for Windows 7 on this one.
Why they went around this user test the wrong way
I’ve spoken and written many times about user testing, there is definitely no wrong way to user test an interface, but there is a wrong way to interpret and incorporate results.
From the article:
The telemetry data here shows that 54.5% of commands are invoked using a right-click context menu, and another 32.2% are invoked using keyboard shortcuts (“Hotkey” above) while only 10.9% come from the Command bar, the most visible UI element in Explorer in Windows 7 and Vista.
Is there really a need to “streamline” for these power users by adding a behemoth of a toolbar to the Windows file explorer? I Think not. Users for years and years have been used to right clicking or using their keyboard to get tasks done. Sure, not easy at first to learn all these commands, but even my mom knows her way around keyboard shortcuts most of the time.
Thinking a bit more on their results, their 10.9% usage from the command bar may be a direct effect on the missing actions up there, but this does not mean that they need to “improve conversion” by adding in all the bells and whistles.
It may just be me but I fail to see the need to add the keyboard shortcuts to every toolbar on every app, we have contextual and right click menus for that.
About these power users
We knew that using a ribbon for Explorer would likely be met with skepticism by a set of power-users (like me)
There is a lot more to the Windows user base than “power users” and these “power users” should not be your main area of concern, they will probably be the ones to add in or transform their Windows UI into complicated pieces of machinery. How about the average user? How about your aunt? Your mom? Or anyone who is not as tech savvy as many of us around the design/dev world?
This is the main point of me writing this. You don’t design to please the tech savvy person, you design to make it easy and simple.
Simple is better
For my closing argument I just want to say that simple is better, I’ll take an unobtrusive, simple UI over a complicated one any day. As you’ve noticed I’m not bringing Mac OS X into this argument, I’ve recently used Windows 7 for a few tasks and actually find the os quite stable and easy to use, so bringing in Windows 7: they made it simple, it works so what are they fixing?
Before I start a flamewar here, I know that Windows 8 is under development and the end product will probably (hopefully) look better, but early feedback is the best right? Windows dev team: how about simplifying a notch? Measuring actual data that will improve the UI and not coming up with UIs like this from misinterpreted/misplaced bits of information?
I will not propose a redesign because as a designer, I think it’s rude to tell another designer how to do their job, we are all good at what we do. The nailed a pretty sweet interface for Windows 7, I just hope they nail a pretty good one for Windows 8 as well.
Thought this was a joke when I saw this on twitter earlier, nut no, it’s an actual MSDN post. I really fail to see how can this be an improvement, just wow.
I love making wireframes, they make my job a whole lot easier, definitely one of the most important elements in my ux toolbox.
What is a wireframe?
On simple terms, a wireframe takes a webpage layout back to the basics, it’s a simple rendering of where the elements and text are placed on a page. By creating a wireframe you make sure you get colors and visuals out of the way and you focus on what really matters: content and user experience.
I won’t get into too much detail on how to make wireframes, you can find lots and lots of information on the matter by just googling around. I highly recommend Fuzzymath’s recent series of posts on the matter, very informative.
What are they good for?
Thinking about elements and layout first is very important, wireframes help you do exactly that. There is no right or wrong way to do a wireframe, just get a piece of paper or fire up your favorite design app and start sketching away. Once you see elements and content on a piece of paper or on your monitor you will start realizing what works and doesn’t and start moving elements around, adding in more, or completely eliminating useless parts. This is the beauty of a wireframe.
Beside from helping you out in your design process, wireframes will also help you to:
Wireframes and user interaction
This is where I find wireframes to come most handy, when defining the user interaction of an app. There are certainly a few of cases I can think of where you could simply skip making a wireframe, normally when the layout is very simple or the requirements are very well documented.
On my previous post about UX design, I discussed a few ideas around creating the right UX for your users. Wireframes are a handy tool for that, they allow you to lay out the user interaction, specify user flows and in general see how a user will move around your app or website.
The great thing about this is that you, your team and stakeholders get to see and experience how everything will work - and change it as necessary at a very early stage.
Stuff to keep in mind
When creating a wireframe always consider:
Wireframes get you…
Well that’s it, hope you enjoyed reading a bit about wireframes and why I love them so much. I hope this inspires you to sketch and wireframe before you start out your next design. Trust me, wireframing only makes the process way easier.
Nieman Lab’s (Harvard) take on Rutledge’s Post. Couldn’t have put it in better words myself.
The danger is that, without generalists, specialists become so wrapped up in their silos that they find it difficult to work with specialists in other disciplines. The generalist is needed to encourage cross-collaboration and to look beyond the silos at emerging developments on the Web.
Great article.
It falls on the UX developer to bridge the gap between design and technology. We need to be able to think and speak the language of designers. It’s our job to help translate their vision to the development team in a way that they can understand and accept.
Tim Todish from UX Magazine just came up with a new job title, apparently trending on twitter and across the blogosphere.
I just find this to be a bunch of BS. A good ui/ux designer knows exactly what they need to know about backends and code, and IMO there is no need to “bridge the gap” between design and frontend/backend development.
If you imply that design and development are two different worlds that need to be bridged, then you are doing it all wrong. A great ui/ux designer knows exactly what the project boundaries are and works hand in hand with devs to build great products.
We’re all beginners under the skin. Scratch an expert and you’ll often find someone who’s muddling through - just at a higher level.
- Steve Krug - Don’t Make Me Think.
My name is Andrés Max. I'm a Software Engineer & User Experience designer. I love designing and building stuff for the internets. What you see here are my writings about UX, software and tech. Enjoy!
©2010-2011 andresmax.com. All Rights Reserved.
Coded in Html5 & CSS3 sweetness.
Powered by Tumblr.
