Wireframing & Prototyping: The Past, Present, and Future Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content. To learn the methods, tools, and processes of UX prototyping, download the free Ultimate Guide to Prototyping. Knowing the origins of wireframing and prototyping will help you put everything into a historical context, allowing you to comprehend the practice and predict how it will evolve in the future. This piece will be somewhat of a modern history lesson, covering digital UX design in its past, present, and future. Present: The Current State of Design At the moment, two of the most popular design methodologies are Lean UX and Agile UX. Source: Lean UX vs. The old way of doing things — the Waterfall method where designers hand off a fully fleshed-out comp to a developer and say “good luck” — is coming to an end. In the vacuum left by the Waterfall method, two alternative schools of thought are filling its place. 1. Source: The Visual Agile Manifesto 2. 3.
Usability vs Beta Testing (The What & When)UX Sisters: A User Research Life If you work in software and product development (or are stumbling around a UX blog…) you’ve probably heard about usability testing and beta testing. They sound kind of useful and buzzwordy, but what do they actually mean? Are they even different from each other in any meaningful way? I’m asked this question quite often, so I wanted to define what each one is — what each one is not — in the life of a UX researcher at a SaaS software company. Usability Testing Usability testing is the process of watching an actual user use your product/screen/app to see if it’s usable. What does that mean? Some say that usability testing is too contrived to be useful because it forces a user to concentrate on a task more than they typically would. When to usability test: During a design phase, gathering baseline data, or when you have a question you want to answer. Usability testing is great when a team has a design that hasn’t yet been fully developed but would benefit from some exposure to real users.
A new browser for our friends In 1994, two programmers started working on a web browser. Our idea was to make a really fast browser, capable of running on limited hardware, keeping in mind that users are individuals with their own requirements and wishes. Opera was born. Our little piece of software gained traction, our group grew and a community was created. Fast forward to 2015, the browser we once loved has changed its direction. We must make a new browser. 18 excellent features of Argos’s mobile app | Econsultancy Argos has been named one of the top multichannel UK retailers thanks to its customer-focused mobile app. Placing a particular emphasis on creating an easy, joined-up customer experience has led to this app becoming one of the most popular downloads in Q4 2014. In a new report from App Annie and Kantar Retail, and covered by InternetRetailing it was found that UK retailers in general were at the forefront of uniting online and offline retail with features such as ‘Click and Collect’, unlockable content and barcode scanners. Let’s take a look at the Argos app and see what features make it so popular. Keeping it local When you download the app, Argos immediately asks you to set your location (which it does find automatically using geolocation) and it presents this localized map every time you fire up the app. Consistency of CTAs There's only one colour used for the most important CTAs throughout the site and the blue is never repeated in other site elements. Saved searches Swipability Large text
Guerilla Research Tactics and Tools I was recently in a project meeting in which several stakeholders were drawn into an argument over a homepage design. As the UX professional in the room, I pointed out that we aren’t our users, and suggested we invest a few weeks into research to learn what users are really doing. The project lead rejected the idea, deeming that we didn’t have time for research. Instead we’d just have to rely on assumptions, debate and ‘best practice’. Many UX practitioners can relate to this scenario. The problem is that cutting research often results in usability disasters. In times like these we need guerrilla research. The concept of guerrilla research isn’t new. Research smart, research fast Limited budgets require us to be very efficient, and a traditional UX research phase can be very involved. When budgets and time are constrained however, we need to know exactly what insights are needed before we begin. Let’s refer back to the meeting I had, discussing my client’s homepage design. Online tools
How to Make a Single Page Website This tutorial explains how to create a vertical-scrolling single page website in four steps. Designing A Single Page Website There are at least 3 kinds of Single Page websites. The basic idea is that all content is placed on one page, but only a portion of it is centered on your computer screen at a given time. Then you can watch the old content slide away when you click a link, instead of loading a whole new page. The picture below is a screen shot I took of another designer’s website, Eshbeata.com. I classified the types of single page websites by the direction/s that the page scrolls. Vertical Scroll (Most Common) Barrel + Barc, Beaver Lab, Little White Umbrella, Eshbeata Horizontal Scroll Vanity Claire, Hotel Oxford, Lomotek 2D Scroll Steve & Jacqs Once again, this post explains the vertical method. When designing your single page website, you need to decide the following things: The HTML The html is actually pretty simple. This lets the browser know that the link is within the page. The CSS
Car Dashboard UI Collection So what’s going on in in-car dashboard design now. I’m not going to touch infotainment system UI in this article as Teehan+Lax did it before. Instead I’ll focus on instrument panels or clusters usually hidden behind steering wheels that have to be a) informative, b) easy to read, c) well visible under any conditions (e.g. sunny), c) attractive and they shouldn’t distract (e.g. blinding at night). I’ve seen many beautiful analogue dashboards from various car manufacturers for years. But time goes on and the industry needs to evolve, so nearly every auto maker started adding virtual LCD based dashboards to their cars by variety of reasons such as ability to customise layout and design, ability to switch between different modes, so driver may decide what is important personally for him at the moment, ability to add new functionality and fixing bugs by firmware upgrade and just because it’s modern and cool.
Replacing Personas With Characters — down the rabbit hole With some anxieties and motivations defined, let’s move to Purchase-Progress Events. Purchase-Progress Events While your Characters are going about their life with their motivations and anxieties, they are going to experience particular events which will pull them toward a purchase. These are Purchase-Progress Events. Here are the Purchase-Progress Events I experienced: Lately, male celebrities and actors in movies have been wearing more alternative tuxedos — most notably created by Tom Ford. Leading up to the purchase, I saw advertisements for the latest James Bond movie. I recently read an article in GQ magazine on how to buy a tux. So far, I’ve been experiencing Purchase-Progress Events through the lens of my anxieties and motivations. Purchase-Progress Situations Purchase-Progress Events are passive. Here are the ones I encountered: I had just got married and I met a lot of people. In both cases, I had to make a decision: I have to use a tux in the future, will I buy or rent it?
300+ Awesome Free Internet Resources You Should Know Ali Mese is a freelancer, wanderer, and contributor to few startup projects. Say hi on Facebook or Twitter. This post originally appeared on his Medium blog. I’ve prepared a list of 300 web resources that are not only awesome, but free to use. Business + Marketing HTML5 UP: Responsive HTML5 and CSS3 site templates.Bootswatch: Free themes for Bootstrap.Templated: A collection of 845 free CSS & HTML5 site templates.WordPress.org | WordPress.com: Create your new website for free.Strikingly.com Domain: Free website resources for strikingly.com domains.Withoomph: Beautiful logos designed instantly.Hipster Logo Generator: It’s Hip, It’s Current, It’s Stylish, It’s Hipster.Squarespace Free Logo: You can download free low-res version for free.Hive: First free unlimited cloud service in the world.Invoice to me: Free Invoice Generator.Free Invoice Generator: Alternative free invoice generator.Slimvoice: Insanely simple invoices. Design + Code Some hand-picked some free photo packs: Discover & Learn
How to test the usability of prototypes like a pro Usability isn’t something you just can cook up in any one phase of design, but must be developed and refined throughout the entire process. If you want the best end product, you have to anticipate real user scenarios from the prototyping phase. Usability testing should be the last place to start thinking about usability. Why worry about usability testing so early in the process when prototyping already has a big enough to-do list? Because unless your prototype is usable, all your testing will tell you is that people don’t like terrible products. unless your prototype is usable, all your testing will tell you is that people don’t like terrible products It almost goes without saying, but you’re designing the product to be used by real people. With that in mind, let’s look at how to keep usability in mind as you build the prototype, how to test usability before you have a prototype, and tips for testing with prototypes… Usability tests before the prototype The right users and the right tasks
The Art of Questioning as a UX Skill by Jason Grant on 02/17/15 at 7:56 am When starting any design project, you’re going to need to ask a lot of questions. The perceived problem and the actual problem may not be the same. So how can you get better at asking the right questions? I decided to brush up on my questioning skills by reading A More Beautiful Question by Warren Berger. Berger illustrates how questioning is an inherent skill we’re quite adept at during childhood. As adults, it’s frowned upon to ask too many questions in the workplace. By analyzing innovative figures, Berger identified three common types of questions that lead to breakthroughs. 3 types of questions: Why? Why does something have to be the way it is? What if…? This is where you mash up ideas, go against common logic, or add/remove factors that make the challenge more interesting. How? This is where the rubber meets the road. Questioning in the context of UX design A better understanding of the problem inevitably yields better solutions. Jason Grant
Atomic Is The Missing Interface Design Tool In Your Browser Great interface design is quickly becoming a priority as companies everywhere start realizing that it’s paramount to their succeeding in the crowded online space. Then why, despite its importance, has there been such a gap in the UX design tools space? Atomic, a startup team of ten based in Wellington, New Zealand, thinks it has the tool that finally fills the gap that will allow product designers to create great experiences for the Web and mobile devices. It’s in private beta right now, but the team has given us a first look at what it’s building. Remember all the way back in 2013 when Adobe announced that it was killing its interface prototyping and design tool, Fireworks? Users came out in droves to express their disappointment and disgust that Adobe didn’t care about them or realize how important Fireworks was to their workflow. The idea Designers are constantly jumping between contexts and making hundreds of versions of the same document because of this. Atomic was born ➤ Atomic
A to Z of example UX docs and deliverables Following on from my article about how to create great UX documents, I thought that it would be useful to collate some example UX documents and deliverables together. This should hopefully provide a bit of inspiration and assist when it comes to choosing the type of document(s) to produce. For each document / deliverable I’ve included examples, together with a quick outline and links to more information. The following UX documents and deliverables are covered: Content models | Empathy maps | Experience maps | Mental models | Personas | Process diagrams | Prototypes | Scenario maps | Scenarios | Sitemaps | Sketches | Storyboards | Style guides | Style tiles | System maps | Task grids | Usability reports | User journeys | User story maps | Visuals | Wireframes | Word clouds Please note that the majority of these example documents are not my own. Content models Empathy maps Empathy maps typically (but not always) accompany personas. Experience maps Mental Models Personas Process diagrams Sitemaps
15 SEO Best Practices for Structuring URLs It's been a long time since we covered one of the most fundamental building blocks of SEO—the structure of domain names and URLs—and I think it's high time to revisit. But, an important caveat before we begin: the optimal structures and practices I'll be describing in the tips below are NOT absolutely critical on any/every page you create. This list should serve as an "it would be great if we could," not an "if we don't do things this way, the search engines will never rank us well." Google and Bing have come a long way and can handle a lot of technical challenges, but as always in SEO, the easier we make things for them (and for users), the better the results tend to be. #1: Whenever possible, use a single domain & subdomain It's hard to argue this given the preponderance of evidence and examples of folks moving their content from a subdomain to subfolder and seeing improved results (or, worse, moving content to a subdomain and losing traffic). #3: Keywords in URLs: still a good thing