- GiveButtons Facebook Page
- GiveButtons Gift Ideas Facebook Page
- GiveButtons Google+ Page
- The Future of Shopping
- The Science of Gift Giving
StoryboardingFebruary 10, 2013
In agile design, stories are the basis for identifying new features for software and applications. A story typical covers a basic unit of required functionality. In user experience design stories incorporate real people in real places doing real things (http://uxmag.com/articles/storyboarding-in-the-software-design-process).
Whitney Quesenbery and Kevin Brooks , in their book, Storytelling for User Experience, list the following benefits of stories:
The app is designed to create comic pages using digital photos.”
Lean Startup Methodology Case Study: Try the New Event Recommendation ServiceFebruary 8, 2013
3D Printing is Slowly Taking OffFebruary 8, 2013
It seems that 3D printing is not one of those technologies that takes the world by storm like the smartphone, but more like a digital camera, slowly getting better and better until it eventually takes over. Maybe 3D printing will never be the answer for every manufacturing need, but there are an expanding number of applications where it can do really well. We’ll highlight two 3D printing advances that have long term implications.
The first is 3D printing of whole buildings. Sounds like science fiction, right? But this is what designer Enrico Dini claimed to be able to do with his D-shape printer back in 2010 (http://inhabitat.com/3-d-printer-creates-entire-buildings-from-solid-rock/). It is hard to know how practical this will be in future and it seems that Dini is thinking about the problem of making buildings on the moon out of moon rock.
“Rather than stockpile spare parts and components in locations all over the world,” he argues, “the designs could be costlessly stored in virtual computer warehouses waiting to be printed locally when required.”
Building a Minimal Viable Product: How Lean Can you Go?February 2, 2013
The Lean Startup: How rapid prototyping of user interfaces is like starting a new businessJanuary 30, 2013
Recently I’ve been reading “The Lean Startup” by Eric Ries. My relationship with the book has a checkered history. I was at a tradeshow over a year ago and someone was telling me about the concept of a minimal viable product and telling me that I had to read the book. At the time I had just got an e-reader (a Kobo) and so I managed to get an e-book version from my library. But somewhere in the process I had trouble downloading the book into my e-reader or maybe I was just too busy and got distracted. Anyway I ran out of time and didn’t manage to read the book. So the next time I queued up for a physical copy of the book from the library. I think I was 70th out of 70 holds or something when I started, but a few months later the book found it’s way to me and this time I made a point of reading it. Well I wish I had read it earlier! it’s an easy and enjoyable read and it makes a few very good points, and quite well.
I consider myself to be something of an expert in user interface design and the user of rapid prototyping and heuristic evaluation but I’ve never really applied those methods to the business startups I’ve been involved in. Two failed startups later and I knew that the approaches I had been using weren’t working so I was ready to try something new. But what surprised me is that the method that is all the rage now in Silicon Valley startups was something that I knew all along and had been practicing, but just in a different domain. It’s one of those situations where I don’t know whether to laugh or cry but now I’m at this point I’ll simply summarize some of the key points that struck me about the lean startup method and how it relates very naturally to methods that are used in rapid prototyping and user interface design and evaluation.
The Wikipedia page says that it “relies on validated learning, scientific experimentation, and iterative product releases to shortenproduct development cycles, measure progress, and gain valuable customer feedback. In this way, companies, especially startups, can design their products or services to meet the demands of their customer base without requiring large amounts of initial funding or expensive product launches.”
And here is what the Wikipedia says about user-centered design: “User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product, but also to test the validity of their assumptions with regards to user behaviour in real world tests with actual users.”
The Wikipedia page on iterative design describes the steps in the method for rapid prototyping and evaluation of user interfaces as:
• Complete an initial interface design
• Present the design to several test users
• Note any problems had by the test user
• Refine interface to account for/fix the problems
• Repeat preceding three steps until user interface problems are resolved
The words may be different, but when you get to the core of it, these approaches are pretty similar and the fundamental similarity is that they are both:
• focused on the user/customer
• focused on appropriate evaluation
• focused on fast learning
• utilizing rapid prototyping and lightweight testing to achieve rapid learning
A simplified version of the iterative design loop in user interface design is shown below, where the implement phase would typically be carried out using rapid prototyping.
In the following discussion I am going to use two figures from a slide presentation by Steve Blank and Eric Ries (http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=TheLeanStartup-090224164815-phpapp01&stripped_title=the-lean-startup-2).
This figure does a great job of summarizing the Lean Startup approach. On the left you see the iterative cycle of observe, orient, decide, and act (OODA). It is a lot like the prototype, test, redesign loop of iterative user-centered design. Act is like prototype and test is like observe so the difference is that redesign has been replaced by the higher level functions of orient and decide. Essentially the lean startup method is a discovery method that is working at a higher level, and with fewer assumptions about the product and the customer, than is the case with the user-centered design approach. The right side of the figure makes this explicit. While the customer and the general outlines of the product are generally assumed in user-centred design (the first motto of which is not “Find the User” but “Know the User!”, in the lean startup approach both customers and product start off as largely unknown and customer and product development both occur through the OODA discovery process.
Here is a second Lean Startup figure showing a bit more detail on the customer and development processes. The key point is that both the problem (who are the customers and what do they want?) and the solution (the product or service along with associated marketing value propositions) are unknown. The business task is to go through the phases of customer discovery, validation, and creation as quickly as possible, all while scaling the company in an efficient fashion and managing not only cash but also the concerns and expectations of all the stakeholders. No easy task at the best of times!
While I am viewing the iterative product development through the lens of user-centred design, Blank and Ries explicitly link it with the paradigm of extreme programming. This makes sense because the goal is ultimately a finished product. But the focus on iteration and customer needs are obviously highly compatible with a user-centred design approach.
Where I think that the lean startup approach has something to add to user interface design is the explicit pursuit of customer requirements and a willingness to pivot to different functionality if flaws are found in the model of what the product/service should be and the associated requirements. I would characterize this as a form of user testing that is plugged in to the business planning process.
And can the learning flow the other way? I would like to think that some of the user research, rapid prototyping, and user evaluation methods that have been developed and refined for user-centred design could also be explicitly incorporated into the lean startup method which I see more as a general approach then a detailed playbook for building new businesses.
The bottom line is that it has never been easier to start new businesses. In the early phases one doesn’t need to rent offices and hosted services make the initial costs of creating websites and providing services very inexpensive. And now, with the lean startup process you shouldn’t have to start spending serious money until you have a pretty good idea of who your customers are and what they want.
Hotgloo and Justproto: Software Prototyping Tools that Emphasize CollaborationJanuary 29, 2013
There are more and more software tools out there for rapid prototyping of user interfaces and it’s hard to keep track of them all. We’ve done a number of posts on the different tools and we are indebted to Lucas Stolarski (http://resources.infosecinstitute.com/prototyping/) for his reviews of quite a few of them. In this post we will add reviews of two more tools, Hotgloo and justproto.
Here’s the Stolarski summary: “HotGloo is suitable both for small and large projects. It allows to insert ready-made modules (eg Login) instead of submitting them from single elements. Each UI element has many configuration options (type of interaction). There is also the opportunity to work on a project by a few people at the same time (online) and easy collaboration with customers (for example a customer can add a note with a comment in each place of a prototype). There’s also a possibility of using project templates.”
You can watch a video showing HotGloo capabilities at:
And there are Turorials at http://vimeo.com/channels/hotgloo
important features highlighted by Stolarski are:
- Ready to insert modules
- Many types of interaction elements
- Easy cooperation with members of the project and clients
- Project templates
- Keyboard shortcut for ease of work
- Easy versioning of project
- Fast switching between edit and review views
Hotgloo offers a student discount (http://www.hotgloo.com/help?tag=pricing). They ask students to email them verification (any document that proves your academic status) and in return they send a promo code, providing 50% off any payment plan.
Hotgloo uses a subscription pricing model. In addition to the plans shown below they also provide a Solo Plan (1 Project, 2 Users, $7/month*) and a Free Plan (1 Project with 5 Pages and 1 User).
Here’s a quick summary of justproto with material from http://www.prototypingtool.com/justproto-prototype-your-world as well as from Lucas Stolarski.
Justproto is a web based prototyping tool primarily aimed at website design. It emphasizes collaboration, and incorporates a real-time preview feature that allows team members and clients to view changes to the design as they are made. Collaboration with others through chat is illustrated below.
Justproto provides hundreds of UI elements, as well as mobile, and each element is customizable.
Components help make a change in the project. If you change something in one place – it changes everywhere.
Prototypes are also fully interactive.
Summary of features:
• UI elements – Drag and drop elements that are adjustable and customisable.
• Icons and banners – Over 200 icons and banners that mimic common internet symbols.
• Master templates – Create master templates so you do not have to waste time repeating the same work on each page.
• File manager – Manage uploads, images etc.
• Real time collaboration – Work on projects with team members in real time.
• Live Preview – Any changes that are made to the design show up instantly to previewers.
The Standard price plan costs $14 per month, and provides unlimited pages and viewers, 1 GB of storage, 10 projects and up to 3 collaborators. All price plans are available for a 30 day free trial.
Examples of prototypes made by JustProto may be found at http://www.justproto.com/pl/examples/
Balsamiq: One of the first really Versatile Rapid Prototyping Tools with the Sketching Look and FeelJanuary 27, 2013
I was first introduced to Balsamiq a few years ago and I was blown away by it. It was pretty unique at the time and let you build things in software that looked a lot like hand-drawn sketches.
I recently came across a comparative review of Balsamiq and two other prototyping tools at http://devgrow.com/review-of-balsamiq-mockingbird-and-mockflow/. The review ended up recommending Mockflow, based on the reviewer’s needs.
I agree with this summary of what is great about Balsamiq: “The layout is intuitive and makes designing both quick and efficient. The hand-drawn is in line with what I want my mockups to be: simple, rough and letting the client know that they’re not seeing the end product, rather just a mockup. You can get more elements/controls from MockupsToGo.net, where users contribute their own creations (an endless supply).”
For a demo Balsamiq mockup, see http://builds.balsamiq.com/b/mockups-web-demo/
The pros are great, but the cons are a bit of a problem for many projects that involve teamwork and collaboration.
• Intuitive interface
• Endless supply of elements/controls
• Plugins for lots of other apps
• Has desktop version (Adobe Air)
• No easy way to share
• Standalone doesn’t offer team support/editing
If you don’t need a team-based solution than Balsamiq is pretty good and a single user license is only $79 (no monthly subscription to worry about).
Balsamiq also has an interesting academic programme: http://support.balsamiq.com/customer/portal/articles/105924#edu
You will also find information on the same page about using Balsamiq free for UX training.
Here’s a summary of the Balsamiq academic programme as documented on the web page cited above.
Getting myBalsamiq free for classroom use#
This program is designed for high-schools and universities which want to use Balsamiq Mockups in a classroom setting, to teach their users about user interface design.
Note: this is NOT for university staff use. For that, we have academic discounts available on many of our products (see pricing).
If you want to use Mockups in your classroom, we’ll be happy to give you a myBalsamiq site to use, free of charge.
Because myBalsamiq is designed for group use, it’s perfect for classes. You as the site owner can create a project for each group of students and invite them to it.
Once invited, students will be able to create, edit and collaborate on mockups by using the in-browser editor. This removes the pain of installing Mockups for Desktop on lab machines and managing license keys.
More details can be found in “Using myBalsamiq” in your Classroom guide.
If some students are eager to purchase Mockups for Desktop for their own personal use, they can do so at a discounted rate ($40/user instead of $79) via myBalsamiq.
If you are an instructor interested in this program, please follow these steps to apply:
• Sign up for myBalsamiq and confirm your email address (this is important).
• Email firstname.lastname@example.org from your school’s email address. Be sure to include the following information. We will email you back if we need any clarification.
• Your myBalsamiq subdomain:
• Your Name and title:
• Name of School:
• Name of Department/Program:
• URL for your Contact Page on your school web site:
• First course myBalsamiq will be used in:
• That’s it! If we approve your application (and we usually do), you’ll see that your myBalsamiq site is free the next time you use it.
If for some reason your site is still not free as the trial period nears the end, please email@example.com again.
Another Prototyping Software Tool: AxureJanuary 24, 2013
Axure is perhaps a bit more corporate than some of the other prototyping tools. For instance, it’s used within the usability group at a local bank, among other places. As usual I’m standing on the shoulders of giants and a lot of the comments below are taken from a review posted at UXMatters http://www.uxmatters.com/mt/archives/2011/06/product-review-prototyping-with-axure.php
The review article starts with the following quote, which I really like:
“I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.”—Jeffery Even
The Axure user interface contains a large central area for designing the individual pages of a site; a sitemap, widgets, and masters on the left; and notes below.
“You can create a simple page by dragging and dropping the basic building blocks, or widgets, onto the page, much as in Visio. The standard, 22-item widget set is fairly comprehensive, including widgets for creating text, images, and forms, but other widget sets are available, and users can create their own. This approach gives Axure a shallow learning curve: it’s easy to get up to speed and start creating simple pages. You can manage pages via the site map, which lets you create page hierarchies. For large sites or applications, being able to hide lower levels of the hierarchy makes it easier to manage the workload and retain a bird’s-eye view of the structure. With Axure, you can import image assets, so a prototype can have as little or as much visual impact as you want.”
One of Axure’s advantages is that it can provide a lot of interactivity in the prototype, should it be needed. “A user’s interacting with a widget can trigger various actions—for example, when a user clicks a widget, moves the insertion point away from a widget, or selects an option in a drop-down list.”
Another of Axure’s strengths is that it is easy to create documentation for the user interface/prototype. Someone I know spent a summer using Axure and this was one of her favorite features.
“As you create your design in Axure, you can associate annotations and interactions with items on a screen. These can be user defined—either by typing descriptions in free-text fields or by selecting items in a drop-down list—so the tool has made the process of describing interactions as painless as possible. Consequently, it’s much more likely that designers will document their work—often the least enjoyable aspect of the job! Axure can generate reports, showing screen images with their associated annotations and interactions, which you can use in your project documentation—another huge time-saver for UX designers.”
One downside of Axure is that you can’t embed a hypertext link within text (unless they’ve changed that recently). Another possible drawback for small companies is the $589 price for a single user license although for larger companies this is a small price compared to the potential productivity gains.
Axure has a good programme for students (https://www.axure.com/free-software-for-students)
“If you are a student studying HCI, information architecture, web design or a related field, you may qualify for a free license of Axure RP Pro. Check out the requirements below and submit the form (on the webpage cited above) to request your free software.
• Must be a full-time undergraduate student or full or part-time graduate student
• Must be studying HCI, user experience, information architecture, interaction design, or other related field with a GPA of 3.0 or higher in the last semester (or equivalent in your grading system)
• Must have grades clearly stated on transcript
• Graduate students without a transcript will be considered with proof of registration in a related course
• Must provide school email address
If you aren’t sure if you qualify, go ahead and submit an application and we’ll let you know.
Please send any questions to firstname.lastname@example.org or contact us at 1-800-895-0810.”
ForeUI: The Current Prototyping Software Leader?January 23, 2013
The latest in our reviews of prototyping software considers one of the current leaders, ForeUI (www.foreui.com). As with our earlier presentations, we are indebted to the material provided at http://resources.infosecinstitute.com/prototyping/ although we extend it with our own thoughts as well as material from other sources.
Like some of the other offerings ForeUI works in Windows, Mac OS X, Linux. It also claims to work on Solaris although I don’t know too many people developing there these days. What’s really happening is that ForeUI is built on Java and thus it inherits the platforms that Java can run on.
ForeUI is skinnable, and it offers a nice way of changing the style, as shown below.
It also has a nice way of defining behavior with a flowchart, as shown below.
The benefit of using a flowchart to create the mockup is that a detailed mockup can be created in a comparatively short time. The flowchart view is also good for specifying interactions so that one can move beyond simply glueing together UI elements.
Once a prototype is built in ForeUI it can be exported to HTML5 to become a fully functional prototype which can then be further added to.
Here is the link to the example site that is a prototype made in ForeUI:
Important features of ForeUI include:
- Switching between few styles (hand drawn, wireframe, winxp, max, win7)
- Easy but powerful configuration of interaction in the prototype using flowcharts
- HTML5 Export
- Creating templates
- Creating sitemap for easier navigation management
- Multi-platform support (Win, Mac, Linux, Sun)
You can download ForeUI for free before you buy the license. The trial version can work with all features for 15 days, after that the save and export features are disabled. The cost of ForeUI is $150 per user, with a slight discount (e.g., 10% with 10 users) as more users are added.
Similar to Balsamiq, ForeUI allows you to use your license on every machine you own.
Students can get a 50% discount. Students should use their student email to contact email@example.com for more details.
When would you want to use a UI Rapid Prototyping Tool?January 23, 2013
The ForeUI website has a pretty good discussion of this topic (http://www.foreui.com/articles/When_will_we_need_UI_prototype.htm) which we paraphrase and extend here.
The two most common purposes for prototype are either prototyping a software application or prototyping a Website. The application might be on a desktop, a mobile device, or even something like a big screen mounted in the environment (e.g., in a library).
In general, rapid prototyping is done so that we can test out the look, feel, and functionality of a design before going to the time and expense of building it out as working software.
The ForeUI article also lists these reasons as examples that motivate rapid prototyping:
• We have a design in mind but just can’t make others understand easily…
• Beta version is too late to collect user’s feedback…
• We want to do user testing ASAP…
• We need some figures for design documentation…
I would add that a good wireframe or prototype can also function as part of a software specification. In a use case modeling approach one would identify scenarios, construct use cases that show interactions associated with those scenarios, and then add in wireframes to show how the user interface would look at different points in the use cases. If you do user testing on the wireframes and associated scenarios (with further iteration of the UI as needed) before finalizing the software spec than the software that is implemented is more likely to be understandable and usably by the intended users.
Prototypes can be classified into three levels:
Level 1: Sketching
A sketch of your website or software can represent your idea about that. It can help communication within and outside the design team.
the following sequence of illustrative sketches may be found at http://vi.sualize.us/ux_ia_sketches_anthony_armendariz_user_experience_wireframes_sketch_ui_picture_9gHS.html
Here’s an example of Google search rendered as a sketch (http://stackoverflow.com/questions/528769/best-web-app-for-creating-screen-mockups).
Level 2: Refined Screen Mockup
A Screen mockup that is a more refined rendering of UI, suitable for documentation and presentation. During presentation and review, page-to-page browsing provides further enhancement.
Here’s a screenshot (wireframe) of the google search interface (downloaded on January 23, 2013).
Level 3: Interactive Prototype
An interactive prototype is closer to the finished product, and it can provide a more realistic user experience. In many cases it will be subject to further user testing and refinement before a decision is made to do the final implementation of the software.
The following image shows an interesting example of an interactive prototype that deals with new software in a specific hardware/device context. The example was taken from http://hci.stanford.edu/