UI Walkthroughs: yes or no?

By Cesare Rocchi

Walkthroughs - still needed?

Photo Credit

The short answer, the one we all use, is: it depends. But the smart guy doesn’t stop there and asks: it depends on what? Here is my answer to that.

Introduction

I have built an app, should I put in a walkthrough? Probably many of you had to answer this questions. In my experience the sooner you address it (even at design phase) the better, because it will inform other choices you’ll make along the path to shipping. Like many other debates (e.g. skeuo vs flat) it’s easy to fall in theoretical discussions and semantics. Here, I promise, I’ll stick to the pragmatic side of things, taking inspiration from other products, not necessarily software products. So, it depends on what?

Walkthough as a kind of manual

Shipping an application with a guided walkthrough is like selling a product with a manual. Think of the last time you have checked a manual bundled with a product. My asnwer is “around 10 years ago”. There is a reason for that: as a user I am an explorer, and I will explain that later. Even Apple, known to be pretty minimal when it comes to manuals, ships the iDevices with a little booklet. I see it as a sort of “placeholder”, something to avoid the complaint: “why there is no manual?” You see where we are going: if you don’t provide instructions people will ask for them, if you do – people won’t look at them. So the manual for products like TVs, fridges or cars has become an object, ignored by default, but with the function to reassure customers: if I need it, it’s there.

Things are a bit different when we talk about software. Those of you over thirty might remember the big manuals bundled with Microsoft Office, but we are talking about ages ago. In 2008 the introduction of mobile applications as we know them today was disruptive in many ways: the SDK, the distribution system and also the manuals. Has any of the apps bundled in iOS a walkthrough? No. Apple provides a support website where you can find all the manuals. This is a big switch with respect to bundled-with-huge-manuals desktop apps we were used to: the manual is online, check it if you need it and nobody shoves in your face a walkthrough when you start an application for the first time. When I started developing and doing research on mobile applications (it’s was 2003) there was a term that implicitly expressed the lack of a manual: “wake up and use”. The rationale behind this expression is: “the application is so intuitive that there is no need of a walkthrough”. Bullshit. I am afraid I have used the adjective “intuitive” in previous writings (even academic papers) but now I think it is too generic and pointless. Not to mention that people are so different at many levels (cognitive, social, cultural) that a universally intuitive UI is like a unicorn. So you don’t want your walkthrough to be considered as the manual of the fridge. What are the options?

Standing on the giant’s shoulders

You can build on previous knowledge or well known patterns. There’s a treasure out there, use it. Let’s put aside walkthroughs for a second and talk a bit about icons of visual cues. For example the “sandwhich” icon, adopted by the Facebook app and many others, is so widespread and adopted in mobile application that you can safely assume almost everybody would know the meaning of that and would expect a panel with sections to open up when you tap it.

Is it intuitive? No. It might stand for a pile of paper, a cake, a sandwich and many more meanings. But so many applications use it that it has just become a sort of convention, much like the floppy disk icon was (and probably still is) a symbol to convey the “save” meaning. So if you build an application inspired to the UX patterns and icons of famous and well known applications it is very likely you don’t need a walkthough. Just be aware it is not about intuitiveness, it is just “standing on the giant’s shoulders”. People are used to it muck like they are used to hold a fork, because they have learned it from someone else. Intuitive encompasses way more wizardry. Something intuitive does not require conscious reasoning, you just use it as if you had always known how to use it, though in software intuitive is usually a synonimous of easy to use. For example, the switch component in iOS is not intuitive, though people use it as if it were intuitive, because it resembles a real world switch and they already know how it works. Paraphrasing: some components in iOS are “standing on real world’s shoulders”, that is exploiting a metaphor.

If the UX of your application builds on top of well known patterns and visual cues, it is likely you do not need a walkthrough. But don’t take my word for it, if you want to be sure, test it.

The power of testing

This is the leitmotive of any good UX designer: test it. You are not building an app for you, you are building that for people. Then why don’t you let people use it and collect some feedback? If you are an indie developer you can ask a few friends of yours to use it. Just don’t tell them anything, otherwise you blow the test off. Thinkaloud techniques are good to spot macro issues, e.g. something does not look “tappable”. If you have budget you can even try A/B testing, showing two of more alternative version of your UI and measuring which one is the most “successful”. In both cases you collect data, evidence to inform your design choices. Any opinion on UX out there is questionable, so – if you can afford it – I really encourage you to validate decisions with tests. To test something you need at least a beta version, with no data available. Instead of building something “in the dark” you can create something based on two common sense properties: the type of customers and the nature of your app.

Types of Customers

As I have mentioned before, customers can be very different by culture, society, and personal traits. A broad distinction to start with is the following: explorers and by-the book guys.

Who is the user? Photo Credit 1, 2

The Explorer is the guy that opens the box of the TV and does not even touch the manual. You can expect this guy to complain, if forced to view a walkthough. Your only escape in this case, is to offer the possibility to skip the walkthrough at any time.

The by-the-book guy is the one that follows the manual slavishly. In this case a walkthrough is needed, or a one star review will pop soon. These are not two mutually exclusive sets but the extremes of a spectrum. Just think where the majority of you customers are placed along the spectrum. You might have no idea, and that’s fine, but if you do try to exploit this information.

Nature of the app

Types of customers is a subjective trait but there is also a more objective side of things. Is your application distruptive? Are you “standing on the giants’ shoulders”? When the Clear app was released there was nothing like that and customers, used to buttons, would have felt lost. That’s why a walkthrough was needed. Sure, they could have run tests, come up with something more inspired to the real world and hope people to get it. But I think the essence of the app was also to be different, to show something new and that generated good traction. So, if you build something so disruptive that is inspired to neither the real world (like the switch component) nor to well-known applications (like the sandwich icon/panel of the Facebook app) you’ll probably need some walkthrough.

You have two options here: instructions-along-the-way, like flipboard, or instructions-at-first, using static screenshots and labels to explain. This is very specific to your application and it’s hard to provide general rules about that. One tricky thing to explain are gestures.

If buttons are a hack then gestures are … hidden!

There is a famous piece by Josh Clark advocating the usage of gestures instead of buttons. If you show me a globe on an iPad I will be tempted to spin it and if it does not I’ll think it’s a bug. This is due to the “affordance” of the globe as we know it in the real world: it is meant to be explored by spinning it. But what about direct manipulation of an items’ list in iOS? Is the swipe-to-delete action intuitive? Absolutely not. Come see my father using that. If I hadn’t told him, he would have never discovered the archive/delete option in the Mail application. Why? Because the affordance of an item in a list does not tell me it is meant to be swiped. This means that either I discover it somehow (accidentally or somebody teaches me) or I’ll never get it, because there is no hint. Nowadays swipe-to-delete is probably so common on iOS that you could avoid to explain it, but that really depends on your target. When it comes to gestures, either your metaphor is very adhrent to reality (as in the globe example) or you’ll need to provide some clue to the customer: you can do it along the way or provide all the instructions at the beginning. The point is: you are building a “realm” which is potentially new and unfamiliar to the user and you want to avoid him to get lost.

Author:
Cesare Rocchi is a speaker, writer, UX designer and developer specializing in web and mobile applications. He began working on interactive applications while he was a researcher in the academia. He runs Studio Magnolia, an interactive studio that creates compelling web and mobile applications. He blogs at upbeat.it. You can find him on Twitter or app.net. When off duty he enjoys snowboard and beach tennis. Now he is busy working on Neater.

Leave a comment

5 minute overview of UXPin at UXPA

Wireframing in UXPin in 5 minutes

By Ronan Flynn

I recently gave a short talk at the UXPA Ireland event ‘My Favourite UX Tool‘ where I gave a 5 minute overview of UXPin.

A UX tool can be just about anything – as proven by the wide variety of talks on the evening. Discussions ranged from prototyping tools to frameworks, moodboard approaches and personal design mantras.

I wanted to discuss UXPin in particular, as my colleagues and I have been spending a lot of time using it in our work here at Engine Yard. It’s become a huge part of our design process as we look to unify and improve our platform UI.

Before adopting UXPin, our team had spent awhile trailing Balsamiq, Invision and a whole range of different tools. As outlined in the slides above, UXPin stuck out due to a number of factors:

  • Smart Elements
    These have been huge time savers for us. Creating smart elements for navigation items and shared elements makes implementing sweeping changes across a project so much easier.
  • Neat, Unobtrusive UI
    Some wireframing applications manipulating lots of panels and menus of tools, often overcomplicating what you’re quickly trying to achieve.
  • Simple Price Plans
    There’s nothing worse than trying to get your company to sign off on a piece of software that has a cryptic, multi-tiered price plan. This was a clear win for us!
  • Active Development & Support
    It’s also great to see that UXPin is constantly being added to. Anytime we’ve contacted their support, we’ve received quick and helpful responses.

The quality of the product is also reflected in this blog and the other tools that they provide for free to the community – keep up the great work you guys!

Author:
Ronan Flynn is a UX designer at Engine Yard

Leave a comment

Priority Matrix: The value of a unique UX

By Pablo Diaz-Gutierrez

Priority matrix - plan differently

President Dwight D. Eisenhower once said “What is important is seldom urgent, and what is urgent is seldom important.” It seems obvious if you think about it. And yet, in this age of information overflow, I bet you are also guilty of task management by email: A new message from a customer, your boss or a coworker often makes you turn your priorities on their head. That little red number telling you how many unread messages you have is so hard to ignore. It’s just human nature, we are wired to pay attention to things that change unexpectedly. We don’t even realize that we are trapped in multi-tasking and the illusion of work.

This problem is so common that several authors have built successful careers on helping people deal with it. Many of them draw, with credit for it or not, from the so-called Eisenhower Matrix. The goal of this method (described in his diaries) is to classify everything you have to do into a 2×2 matrix, where critical (important) things go on the top half, and immediate (urgent) things go on the left side. This way, everything we have to do falls into one of four categories:

  • Critical AND Immediate: Do this now, it’s an emergency
  • Critical: Spend most of your time and effort on these tasks
  • Immediate (but not critical): If you can delegate this to someone else, do so
  • Everything else: Stuff that falls here doesn’t deserve your time

Priority Matrix - four quadrants

At Appfluence, we develop a suite of tools called Priority Matrix. This post describes the design decisions we made early in the development process, when we were still trying to figure things out. It used to be that developers working on a new tool would have to start from the bottom up, developing low level UI elements that, when put together, would bring their products to life. Today, modern development tools and powerful frameworks have come a long way. Creating a full, polished product is now easier and faster than it ever was. But this convenience came at the cost of suffocating nearly all originality in user interfaces. When presented with the task of designing Priority Matrix, we decided to do the right thing and deliver a pleasant, unique experience that serves our users well.

One way to think about design choices is in terms of a spectrum of possibilities that ranges from hastily putting off-the-shelf components together, all the way to developing complete UI elements from scratch. The former has been done time and time again, and the results are invariably unsurprising. Software outsourcing houses churn examples by the dozen, and they don’t make a blip on anyone’s radar because they’re more of the same. The latter, on the other hand, requires a lot more effort, dedication and frustration until you get it right, if you ever do. But if you succeed, the result is a unique, well fitting UX that yours users will hopefully love. We went that way, and after iterating several times, we settled on a design that made us happy.

The first and most obvious decision to make was how to implement the four quadrants. Our original constraints were the following:

a) Each version had to feel native to the platform, to differentiate from quick ports
b) The UI had to be touch-friendly, since our first release was for the iPad
c) The quadrants had to be resizable by the user to focus on one section, or else we would wasting a lot of screen real estate

Given the task to design a 2×2 matrix, the quick, first approach would be to show some buttons to maximize each quadrant, to reassign items across quadrants, and to change projects. We did this as a proof of concept, and it felt clunky. As it didn’t fit our requirements, we moved on. The next iteration would allow the user to drag the edges between each quadrant in order to resize them as needed, horizontally or vertically. This was an improvement over the first attempt, but it still didn’t feel native on the iPad: It was like a Windows app ported to a tablet interface. Also, in order to be usable at all, the edges had to be pretty wide, in order to allow the user to drag correctly. This would also have made us waste a lot of space, which we couldn’t afford on a smartphone or tablet version.

After much sketching, head scratching and contemplation, one of us (I can’t remember exactly who) proposed having a central button that users could drag to resize the four quadrants at once. That was just right. Even though this was a non-standard UI element, users were able to identify the functionality at first sight (the icon helps with that). Because it’s just one button, we could easily afford to give it sufficient space to be easy to drag. And best of all, it is just fun to use. Even this long after we first released the app (it came out on day 1 of the iPad era), we still turn heads when we demo this particular feature. In retrospect, we wouldn’t do it all the time, but the effort we put into carefully designing from scratch paid off in scores.

Priority matrix screenshot
Priority matrix screenshot 2

The resizable quadrants is the signature element of the Priority Matrix interface. But the same careful, iterative design process was used to come up with other interaction elements. For example, items can be rearranged (re-prioritized) by holding a finger on the item and dragging it from one quadrant to another. We did this because we felt that the default iOS table reordering gestures were a bit clunky when working with multiple tables side by side. In addition, the iPad version of the app exploits the device’s multi-touch capability beyond the standard pinch and swipe operations. When dragging an item with one finger, a second finger can be used to change projects, reassigning the item to a different context. Little things like these make up a complete user experience. It pays off to step back and think through every now and then.

The design approach we propose here is not for everyone, every time. It is time consuming, demanding and uncertain. However, as we said before, when it works, the results speak for themselves. As mobile, tablet and web development frameworks evolve, it will become increasingly clear which UI and UX conventions stick and which ones are phased out. Until then, I recommend that you set clear goals and take a chance to explore the possibilities that your platform offers. Just don’t be a copycat.

Author:
Pablo Diaz-Gutierrez is a co-founder at Appfluence. They make Priority Matrix, a simple and effective task management software tool for busy people. Pablo is interested in all things productivity, and he would love helping you go home on time to enjoy the simple pleasures in life.

Leave a comment

Hold on to reality: restrain your creativity and your feedback. Part 3.

By Dominik Strzałkowski
User interface designer at Macoscope

FIRST PART OF THIS ARTICLE
SECOND PART OF THIS ARTICLE

Bubble Browser - entirely new approach for your Evernote data

How to introduce innovative solutions?

Tip 7: Introduce innovative solutions only in an environment the users know.

Bubble Browser Intuitivenes Graph

Most of our solutions related to user experience are based on the guidelines developed by Jared Spool. Jared Spool demonstrates how a designer should think in order to create a useful, intuitive product. The main issue that Spool emphasizes is that it is not the design that is supposed to be intuitive – it is the users who act intuitively when using the software. The design has to be thought out in such a way as to help in this matter, and, if the need arises, to inconspicuously train users.

The user’s intuitive activities are an individual issue and, according to Spool, are closely related to two issues:

  1. What people already know when they start using the program; in other words, their entry knowledge;
  2. Previous similar experiences and how do they impact their perception of the application.
Taking into account the fact that the perception of most users is normally limited to what they are already acquainted with, we, as designers, have to predict which elements the users will recognize, and which they will have to be taught.

Jared Spool discerns two types of user knowledge: current knowledge, that is the knowledge a user already has, and target knowledge, the knowledge one needs to use a given program or application at full capacity. The space between them (the knowledge gap) is to be covered by a well-thought-out and intuitive product. Assessing the current knowledge of users, that is recognizing and analyzing their previous experience, can greatly help in the determining of the required target knowledge.

The purpose of this analysis is to minimize the amount of new knowledge that the user has to obtain in order to use the application. Obviously, an ideal situation would be one, in which this comes naturally, and one’s previous knowledge would be employed when using the application. So all the new elements of Bubble Browser 2 had to meet two basic goals: improve the prototype and make use of the elements and environment that the user is already accustomed to. Users can’t start from scratch, and we had to help them navigate through the application with their current knowledge. One of such elements that makes use of this is, for example, the omnifield, a text-based query box at the top of the screen similar to that in which users type in website addresses or submit queries in Internet browsers. We made the assumption that users will quickly understand the principle of the omnifield by analogy to similar solutions. An additional element that supports this connotation is the use of the term “browser” in the program’s name itself.

Bubble Browser omnifield Screenshot

Fig. Omnifield Screenshot

We considered three elements of the UI as relatively well-known and facilitating the use of our app:

  1. The omnifield for browsing, an element known from internet browsers.
  2. Thumbnail previews of note content.
  3. Note content presented in a linear way common in browsers, word processors, and Evernote itself.
  4. Bubble Browser bubble screenshot

    Fig. Bubble screeenshot

    The use of accessible elements in an environment that users were acquainted with allowed our innovative use of bubbles to browse data to be a straightforward means of conveying information and facilitating navigation for those, who haven’t used Bubble Browser previously. In this way, even more so than in version 1.0, we created an accessible environment for learning how to use the application efficiently and intuitively.

    Evaluation

    Tip 8: Analyze application reception and its assumptions.

    On the 21st of March the newest version of Bubble Browser was made available in the Mac App Store. Of course mistakes were made, both in the application itself as well as in the work process. But we handled them promptly with a frank and direct attitude that allowed us to complete work without significant delays. We believe that the system of extensive limitations we imposed allowed us to develop an efficient way of delivering a product with a limited number of people on the design team without any holdups and without overinvesting.

    As we care about feedback and how people evaluate our software, we would like to hear from you. Take our app for a spin and let us know what you think. We would like to verify whether our assumptions work in practice and whether the aesthetic and functional minimalism allows for intuitive use of the software.

    END OF THE THIRD (LAST) PART

    Check the infographic about Bubble Browser 2 at: http://visual.ly/bubble-browser-evernote

    Download Bubble Browser from Mac’s App Store http://bit.ly/GetBubbleBrowser2 and send us your feedback http://BubbleBrowserApp.com/#support , or get in touch via e-mail: BubbleBrowser@macoscope.com
    Regards from Poland,
    The Macoscope Team
    http://www.BubbleBrowserApp.com

    Leave a comment

Hold on to reality: restrain your creativity and your feedback. Part 2.

By Dominik Strzałkowski
User interface designer at Macoscope

YOU CAN READ THE FIRST PART OF THIS ARTICLE HERE

Bubble Browser - inspire yourself visually

Tip 5: Limit creativity, but make the work process more flexible.

It’s very important for us to keep the work process flexible and to allow for the fast change of priorities. Project management is a primary issue, but, for efficiency’s sake, the work process cannot be rigid and linear.

In order to maintain the flow, flexibility and nonlinear quality of the work process we used Trello, an Internet-based tool for project management. Trello allowed us to objectively keep track of our work progress, the number of various concepts and the flow of information between developers and designers. As a program that originated from the Kanban method (a scheduling system for production), Trello ideally supported our idea of limiting creativity and making the work process more flexible. It also could be used as a visual aid for the GTD (Getting Things Done) methodology.

Furthermore, as followers of the Manifesto of Agile Software Development, we tried to employ its four principles (the fourth point was not a focal concern in this case, as there was no direct client):

  1. Individuals and interactions over processes and tools;
  2. Working software over comprehensive documentation;
  3. Customer collaboration over contract negotiation;
  4. Responding to change over following a plan (in this case Evernote was our indirect “client” and, in practice, the supplier of data).

When designing Bubble Browser 2 the following points were most important for our tasks:

  1. Analyzing user feedback and prioritizing it according to the difficulty level, time consumption and innovativeness (meaning a solution that the users have not considered) of the proposed changes;
  2. Determining the bare minimum of changes that would render the application more efficient, so as to not revolutionize its concept;
  3. Deciding on flexible project management tools;
  4. Distribution of responsibilities amongst the design team, and designating one person to keep track of the creative constrictions and to manage the flow of the project’s progress.

Tip 6: Don’t employ every suggestion you get when designing an application

After receiving information on the needs of our users we could revise the assumptions of our project and proceed to the main work phase for version 2.0.

The feedback we got showed us what features were expected, but we decided to minimize the number of changes and improvements, and not to give in to the pressure of creating an app that will unquestioningly address all user needs. Listening to user opinions naturally is important, and it gives you the chance to broaden your perspective, but it nonetheless is imperative to distinguish between high-priority needs and those that can wait. We considered those most important that allowed us to streamline the application, but without drastically altering its concept.

END OF PART TWO

Tip 7: Introduce innovative solutions only in an environment the users know.
Tip 8: Analyze application reception and its assumptions.

YOU CAN READ THE THIRD PART OF THIS ARTICLE HERE

Check the infographic about Bubble Browser 2 at: http://visual.ly/bubble-browser-evernote

Download Bubble Browser from Mac’s App Store http://bit.ly/GetBubbleBrowser2 and send us your feedback http://BubbleBrowserApp.com/#support , or get in touch via e-mail: BubbleBrowser@macoscope.com
Regards from Poland,
The Macoscope Team
http://www.BubbleBrowserApp.com

Leave a comment

Hold on to reality: restrain your creativity and your feedback. Part 1.

By Dominik Strzałkowski
User interface designer at Macoscope

Design of Bubble Browser

Design Process of the Bubble Browser – foreword

This blog is all about design and we want to show you people who are changing this game. Macoscope team created completely new way of browsing your Evernote notes. They take out the text based, boring, architecture of the Evernote and replaced it with visual search – the Bubble Browser. I’ve heard that Evernote founders were impressed. Let’s hear their story!”

Marcin Treder

Macoscope is a Polish company founded by people fascinated with creating applications for Apple products: iPad, iPhone and Mac. We’re working in interdisciplinary team of developers, engineers and designers and benefit from unique experience and potential of each team member. We enjoy our job and gladly share experience acquired through years, so in this three part article below we’d like to show you how we design our apps. We’re open to dialog and sharing our knowledge. Our team will gladly listen to your opinion.

Limit yourself

Tip 1: Limit your possibilities

Based on our experience with our newest project, Bubble Browser, a visual browser for Evernote notes, we wanted to present our approach to implementing innovative solutions in applications. The assumptions we held throughout the development process allowed us, a group of five, to create a stable, and in our opinion, conceptually revolutionary, product in a little over six months.

What advice can we give you to help you efficiently deliver a program to the market that features an innovative solution? If you want to be creative and complete an application within a given timeframe, you have to establish clear and strict limitations on every level: analytical, functional and, most of all, creative.

Tip 2: Watch out for excessive creativity

Many software designs share a problem we don’t like to admit: the impossibility of their completion. We can only make guesses based on our experience, and that of our colleagues, how many promising concepts were scrapped during various stages of development, testing and functional verification. It is not uncommon to hear bitter conversations amongst application designers in which they complain about failing to deliver their products to the market because of this. No one records the statistical data on unfinished projects, but, being a part of the application designer community, we know that it is a common problem.

It’s obvious that technology offers us virtually unlimited creative possibilities. Everybody knows this and everybody gives in to its creative potential. Tools that are used in application development (we chiefly use OmniGraffle, Slicey, Skala, Trello; occasionally Basecamp; and, of course, Adobe CS) are increasingly intuitive and relatively simple to use. We have – and have always had – many talented software engineers, developers and designers (and, contrary to the theory of “the age of creativity”, this hasn’t changed in recent years – we’ve always been surrounded by talented individuals).

Tip 3: Don’t give in to the terror of innovation and the allure of technology

Used as a buzzword to describe any nonstandard idea, constantly emphasized, imprecise and unclear, the word “innovation” tempts and increases the feeling of partaking in something special – ultimately, we’re creating contemporary technology, and the need for innovation is the basis of all our good decisions. However, it is also the basis for many of our mistakes.

Why is it that, despite a favorable work environment, we (as the software designer and developer community) do not finish so many projects or cease working on them half-way through? How can we fight the terror of innovation and creativity that slows us down? What can we do in order not to allow our desire to create a “total application” to change our design into a multi-headed monster that will eat us up along with our budget, emotionally burn out our coworkers, and, finally, will force investors to change their line of business and return to “safer” and more traditional solutions, which have worked in the past?

Quickly create a prototype and get feedback from actual users

The origins of Bubble Browser

Bubble Browser is an application that was created for the purpose of Evernote’s international Dev Cup 2012 competition. Naturally we wanted to win, but we knew from the beginning that our primary goal should be providing of a working prototype as soon as possible in order to get feedback from our users – even if we risked releasing a partially unfinished product.

Evernote Bubble Browser

Bubble Browser 1.0.

Tip 4: Limit the number of innovative features to a minimum

Nothing is more frustrating and damaging to a team as a period of time-consuming work that yields no visible results. We knew from practice that in order not to burn ourselves out when perfecting a product for a longer period we should minimize the amount of solutions we wanted to include from the start.

Although we had many ideas for additional features, we decided to limit ourselves only to one main purpose of the application: browsing notes. Bubble Browser was always supposed to be a browser – nothing more, nothing less. As we had time restrictions and did not want to get lost in creative concepts we decided only to introduce one innovative element unknown to users previously, that is bubble browsing.

Six weeks after we started working on the app, we had a fully-functional, though still underdeveloped (both creative- and design-wise) prototype. Version 1.0 was accepted by Apple and included in the Mac App Store, and within three months it circulated the globe and was tested by hundreds of users.

Actual users provided us with feedback that allowed us to impose the precise limitations we desired. Thanks to our decisive work process and the fact that we purposefully left the software’s functional side and design incomplete, we managed to skip the time-consuming phase of testing the application’s functionality.

On February 20th, 2013, Evernote published a shortlist of the best Dev Cup 2012 projects. We are proud to have been featured on that list. This also convinced us that the project is worth perfecting. http://blog.evernote.com/blog/2013/02/20/the-best-from-devcup-2012/

END OF PART ONE

In the next parts we will show you more tips based on our experience working on Bubble Browser:

Tip 5: Limit creativity, but make the work process more flexible.
Tip 6: Don’t employ every suggestion you get when designing an application
Tip 7: Introduce innovative solutions only in an environment the users know.
Tip 8: Analyze application reception and its assumptions.

YOU CAN READ THE SECOND PART OF THIS ARTICLE HERE

Check the infographic about Bubble Browser 2 at: http://visual.ly/bubble-browser-evernote

Download Bubble Browser from Mac’s App Store http://bit.ly/GetBubbleBrowser2 and send us your feedback http://BubbleBrowserApp.com/#support , or get in touch via e-mail: BubbleBrowser@macoscope.com
Regards from Poland,
The Macoscope Team
http://www.BubbleBrowserApp.com

Leave a comment

Why I Interview the Most Influential Thought Leaders on Dorm Room Tycoon

By William Channer

Dorm Room Tycoon logo

I think it’s a moral duty for those that have accomplished great things to share what they know. Steve Jobs Stanford Commencement speech was so popular because he shares what he has learnt.

I started Dorm Room Tycoon because I was annoyed. I was annoyed that interviews focused solely on the guest’s life story without revealing any practical advice. I was annoyed that the interviews were long. I was annoyed that the same questions were being asked and that the interview was about promoting something.

I wanted something different. I decided to build Dorm Room Tycoon around my own needs and preferences. So, interviews are usually around 25 minutes, quick enough for you to listen on your lunch break. They have a clear focus, so you know by the end of the interview you will have a better understanding on design, for example.

I spend a lot of time editing, making sure there is a high concentration of practical advice. Anything that sounds wishy washy I delete from the interview. I hardly speak during the interview. I probably say something every 5 minutes and it’s usually starts with “How” or “Why”. I don’t want to get in the way. Because, I too am also learning. My friend and I attempted to do a startup at university and quickly failed. We were naively ambitious, we didn’t have the insight to make it happen. So with Dorm Room Tycoon, I hope to bridge that gap between those that have the vision and energy to make an impact but don’t necessarily know how to.

I want Dorm Room Tycoon to be an all in one comprehensive place for those that want to make an impact. And I think in order to make an impact you need to have a good grasp on business, design, and marketing, and these are the things I explore with the guests.

I’m also moving into doing books on the Kindle, where people can digest the interview at their own pace. The idea for doing books actually came from Ryan Singer from 37signals – and we will be releasing our first book together pretty soon. It’s actually done. We just keep going back and forth on the title.

I don’t see myself as a journalist, I’m not bothered about the latest news. I just want to know what people know, and what helped them get to where they are.

I’m glad to be working with UXPin in that they will handpick their favorite interviews on design and entrepreneurship and post it right here, for you to see. I highly recommend the interview with Jason Fried on “Why Copy is Design” and the interview with Don Norman on “Understanding Good Product Design”.

If you want me to interview somebody you admire, tweet me @williamchanner with some potential questions and I’ll do my best to get them on. And if you find the interviews insightful, spread the word!Oh and if you’re thinking of getting Squarespace sign up through squarespace.com/dormroomtycoon and use dormroomtycoon4 to 10% off.

Author:
William Channer is the founder of Dorm Room Tycoon, a podcast show that teaches you how to make an impact. He interviews the most influential thought leaders in business, design, marketing, and startups. Past guests include: Eric Ries, Steve Blank, Don Norman, Stefan Sagmeister, Swiss Miss, Erik Spiekermann, Luke W, Jason Fried, Seth Godin, David Karp. He graduated from Imperial College London.

Leave a comment

What UX Designers Can Teach Marketers About Visual Storytelling

By Danny Groner

UX designers work hard to make the pages brighter and easier to navigate for everyone. But one thing that some companies may lose if they overlook the importance of their design team is the expertise that their UX team has in actually selling products or services. In short, they put on more than a pretty face.

Executives should learn to welcome the design team into discussions about campaigns, advertisements, and messaging, as the UX team can contribute thoughtful suggestions about how typical people react. They’re the ones at a company most directly in touch with the research and information that guides a team courting new business or keeping existing clients happy. Here are a few thoughts on how businesspeople and other marketers can take advantage of UX design principles.

One of the core principles of UX design is crafting a natural flow for users to discover their desired results by following a clear and simple path of interaction. Marketers would be wise to follow suit. Designers know that the best way to court and keep people is by telling a compelling and addictive story. Why not try to do the same with your marketing materials? Start with your desired user outcome (i.e. a form signup, login success, or some other interaction) and work your way back. How can you get someone to engage with the process long enough that they’ll stick around to hear your pitch, or to register to hear more about your company?

The first rule is that familiarity breeds comfort. When people see someone or something they recognize they’ll feel calmer and less skeptical. This especially holds true with people – we instinctively react with greater familiarity and comfort when there is a person involved – we’re also much better at information retention when a person is involved in the transmitting of the information. In visual storytelling, if the same person appears throughout your communication, it’s a much more consistent way to reinforce your messaging.

Start telling a more human story with your pitches. Shutterstock now offers a “Search by model” feature that makes it easy.

Shutterstock same model feature

Here are five ways this feature will get your marketing team thinking more like designers:

1. Powerpoint presentations.

As you turn research and data into slides, you might consider brightening them up with some graphics. Having the same model appear on each slide, posing in different ways and calling attention to the relevant information, is a great way to keep people focused. Visual aids come in handy, but adding a familiar assistant will go that much further.

2. Travel brochures.

When booking tickets and making itineraries for our vacation getaways, it’s useful for us to see someone in the pictures enjoying the sun, nightlife, or other perks. We imagine ourselves in that spot, and it becomes an emotional experience from the get go; we grow to crave that time away even more. A smiling model appearing in different locations and hot spots will act as a personalized travel agent walking potential customers through the amenities on hand.

3. Educational worksheets.

If you’ve ever attended a daylong workshop or continuing ed course, it’s a reminder that sitting through classroom time can still be a drag, even as adults. Course instructors can borrow a lesson from elementary school teachers in this way and spice up their worksheets with a Mavis Beacon-like presence, courtesy of a stock model in the margins. It’ll help reinforce the material for more visually-oriented students and keep things interesting.

4. Article series.

Website editors occasionally report on the same subject at some length, and using a model to illustrate each article in the series is an effective way to demonstrate that they are meant to be tied, or read, together. For instance, if you were covering the ways that different social media platforms influence our decision-making, you could have the model at the top of each article demonstrate different emotions related to the various platforms.

5. Product how-to guides.

When unveiling a new product or feature, it’s often best to do so with an assistant to outline, explain, and showcase it at work. The narrative you hope to develop in the introduction is greatly enhanced – and this is particularly true online – by an assistant who appears on screen to show off the ins and outs of the system. Even if the terrain is new to them, if the graphics are compelling enough, people will flock to the next page in hopes of learning more.

Author:
Danny Groner is the manager of blogger partnerships and outreach for Shutterstock.

Leave a comment

Four “Go-Mobile” Traps

Four go-mobile traps

Photo Credit

By Yingying Zhang

I had a wonderful night at UX Eye meetupMike Mace gave us an excellent talk “The Four Mobile Traps” – Lots of great stuff and I was taking notes like crazy! I thought it would be great if I share my notes and thoughts with you, so that more people can avoid these traps:) I’m sure nobody doubts the power of mobile devices and how they are changing our world: people pull out phones and tap tap tap whenever they get a chance; my friend deals with emails on his phone most of time; some people seriously consider replacing laptops with tablets.

Lots of companies are going for mobile solutions these days. This could be a very exciting journey, especially for big companies. It’s not easy — going mobile means (1) users may reconsider their commitments; (2) current rules of good product designs may change – strong things in web platform tend to be weak. But it’s time for change, see a presentation by Marc Benioff, CEO of Salesforce.com, talks about their product future. Seriously go mobile? Here comes the four traps.

 

1. The Legacy

Company leaders usually underestimate this challenge, thinking “porting” web app into mobile would do it. This won’t work in most cases, since mobile apps can be vastly different from web. Simply porting app from web to mobile may result in awkward usage flows, too many or too few mobile features, or even worse, broken features.

The solution? Rethink mobile. Don’t port.

  • Learn the mobile paradigm: build a mobile team and follow best practice; if you don’t have enough resources, at least you need a dedicated mobile product manager.
  • Separate what you do from how you do it: think Microsoft. Microsoft have been trying to make mobile interface look like Windows (for example, WinCE) and failing for so many years. Finally they rethought designs and Windows Phone came out, but the greater market was already snatched by iOs and Android.
  • Break down your app: do not make your mobile app like a gigantic monster — just think, do you want to use it if you are a user?
  • Focus on your mainstream users (the 80%) first: you need to understand what average problems for your major users. You may be very excited to learn about how your top 20% users love to use your products and innovative advice they provide, but remember to solve the core problems first, do not try to get a home-run to satisfy your 20% users.

2. Smartphone Fear

Increasing smartphone users does not equal to increasing tolerance for privacy issues. For example, quite a few users have fear about auto sharing to their social networks (by the way, I’m the kind of person who checks my social network posting immediately after I share).

The solution?

  • Do it right
  • Use trademarks for transactions
  • Display opt-in and opt-out options
  • Give users absolute social clarity

3. Confusion

Designs that lack thoughtfulness may get people confused in many ways:

  • Unreadable: text too small; the interfaces have low contrast and users can not read the mobile content under the sun or in battery saving mode.
  • Unusable elements: for example, this horizontal scroll is too small for fingers.
  • Unusable elements - too small buttons
  • Cryptic buttons, icons, text: when there’s no standard, your icons are just pretty pictures, make them meaningful
  • Unresponsive: users can get confused when there’s no response to their actions — they may think “Why there’s no reaction? Did I do something wrong” and start press actionable areas on screens repeatedly
  • Lack of help
  • Lack of intuitive success path: you know this when a user says “what can I do from here?”
  • Design over usability: this means although your interface is pretty, it’s not easy to use.

The solution? 

  • Remember functionality is the highest form of beauty, make it easy-to-use first.
  • Avoid confusing UI, such as multi-level menus in a small screen
  • Make it responsive, or acknowledge users that something is going on
  • Offer help to users, make it context sensitive
  • 4. Boredom

    Users pay less attention to content details on smartphones, therefore, it’s important to get users hooked to your app fast.

    The solution?

    When you do user testing, do not just test usability, also pay attention to user emotional engagement. Gather both quantitative and qualitative data, such as conversation/bounce rate.

    As a summary for how to avoid these traps, check out Mike’s 10-point plan to avoid these mobile traps :)

    Time to go mobile and do it right!


    Author:
    Yingying is an enthusiastic UXer living in the San Francisco Bay Area of United States. She loves web, mobile or any object that possesses great user experience. Sometimes she develops her own for fun, too. Yingying loves food, books, Karate and exploring the world. To know more about Yingying, visit her website: http://yingyingz.com

    Leave a comment

    Creativity… The Missing Link Between Data and Common Sense

    By Jeff Parks

    Jeff Parks - Creativity... The Missing Link Between Data and Common Sense

    Data overwhelms almost every industry and sector today. Our collective inability to see through this “fog” of over analysis has created a kind of creative paralysis. The need has never been greater to ask ourselves are we disagreeing with the individual or the idea? Are we open to learning from other experiences and professions or are we resolute in our process and job title?

    We huddle up in scrums through Agile, trim the fat in UX approaches in Lean UX, and some still believe in the hierarchical waterfall to get work done. But in an era of never ending wind-sprints focusing who can be first I demonstrate through stories of other creatives – and my own experiences in the health care and IT communities – this essential human need to not just create but to engage in the creative process every day.

    Drawing on the stories of children’s TV producer Bruktawit Tagabu in Ethiopia, authors Ayn Rand, Austin Kleon, IBM, Jon Cleese, and the Canadian rock band Rush, I illustrate this need to focus more on the creative process  and creativity in our professional endeavours – imagining what is possible rather than justifying what is not.


    You can also listen (and download) the audio version of the talk.

    Play

    Author:

    Jeff Parks – Information Architect and User Experience professional with a background in Cognitive and Behavioral Psychology, trusted mentor to web designers and architects from around the world. Over 15 year career, worked with public, private, and non-profit organizations. Jeff is part of the team that helped lead and build the global event on information architecture, World IA Day. Co-founder of DIGIA UX Inc. Guest lecturer at universities and colleges in Canada and through Follow The UX Leader (co-created with Kris Mausser), podcast editor for Boxes and Arrows. Presented at the 2011 IA Summit in Denver and was the Closing Keynote at the 2012 Polish IA Summit in Warsaw Poland.

    Linkedin
    Twitter

     
    Leave a comment