A good user experience doesn’t get delivered just like that. It’s the result of the countless hours of efforts spent in the product development process, from conceptualization to the final delivery. It involves designing and redesigning your product or app based on a series of exhaustive user testing sessions, and let’s face it, you cannot perform a user testing session with static assets like wireframes or visual mockups. There has to be some sort of interactivity, otherwise your users won’t get a taste of how the product/app actually works.
This is where prototypes come in. There have been a number of occasions where I’ve seen people (both clients and users) not understand what a prototype actually is, and as a result, have ended up expecting all the wrong things from it.
What a Prototype Is Not
A prototype is not the final product. Do not expect it to look like the final product. It need not have a high fidelity or be pixel perfect.
I’ve seen clients and users look at prototypes and say things like: “That’s your final design?” or “Whoa! That is super ugly.” I’m pretty sure a lot of designers have faced this problem and have had a tough time explaining to their clients or users that what they are looking at is not the end product. Again, static assets like wireframes, visual mockups, etc. that show a single state cannot be considered prototypes. Prototypes have a high degree of interactivity.
What a Prototype Is
So what is a prototype? The answer: it’s a simulation of the final product. It’s like an interactive mockup that can have any degree of fidelity. The main purpose of building prototypes is to test whether or not the flow of the product is smooth and consistent.
Prototypes breathe life into any design and provide a great deal of insight into the user interaction at various levels. Not only do prototypes allow us to test the feasibility and usability of our designs before we actually begin writing code, they also lead to unexpected discoveries and innovations that may or may not take our project beyond its initial scope.
How Are Prototypes Created?
There are several tools and techniques that can be used for building prototypes. It is up to the designer to decide which they will use. Also, it’s completely up to the designer to decide the fidelity of their prototypes.
As a designer, I tend to choose low-fidelity over high-fidelity prototypes. Why? Well, as long as a prototype simulates the desired interaction flow and feel of the product, I’m good. Elements like visual design can take a back seat for the moment. And, to be fair, it takes less time and effort to build low-fidelity prototypes compared to their hi-fidelity counterparts.
A prototype is not the final product. Do not expect it to look like the final product.tweet this
The tools that I use (and also recommend) are paper, pencil, sticky notes, and index cards for paper prototyping, and Adobe Fireworks for building click-through prototypes. Each of these techniques—paper and click-through—have their own set of advantages and disadvantages.
In case of a paper prototypes the major advantage is that you can use the same pencil sketches you initially began your design process with. There might be different sketches displaying various screen states, index cards showing dropdowns, and sticky notes depicting modal windows; you can erase and make changes according to users’ expectations and comments—the possibilities are practically endless. But then, a paper prototype does not offer the feeling of “clickability” that a click-through prototype can. So if that is an issue for you, your users, or your clients, you can always use any tool of your choice to build click-through prototypes.
Click-through prototypes take a lot more time to build than paper prototypes, but they do take care of the clickability issue. There are numerous tools you can use to build these kinds of prototypes, but my tool of choice for click-through prototypes is Adobe Fireworks. If you’re wondering why I defer to Adobe Fireworks, check out Mike Locke’s videos on Adobe Fireworks. He’s been in the industry for a long time and is a great advocate of this awesome tool.
Prototypes Are Powerful
I’ll conclude by reiterating that prototyping is an integral part of the UX design process. Let me put it this way: if delivering a good user experience is the ultimate goal of your project (which probably is), then you need to have at least some degree of prototyping.
What tool you use or what level of fidelity you choose is completely up to you. What’s important is to make this step a part of your design process.
by Arijit Banerjee
Well, here’s something we weren’t expecting – Facebook is releasing a separate app for its Messenger stickers just in time for the holidays, dubbed Stickered for Messenger.
The new app basically just lets you add stickers to your photos and then send them to your friends on Messenger. You can finally put huge emoticons and cute cartoon animals over your friends’ faces easily.
Facebook is also introducing new holiday-themed tidbits to the regular Messenger app as well. These include frames for your New Year’s Eve selfies, snow globe chat heads and holiday-themed sticker packs.
Stickered for Messenger will be available from the Play Store later today, and is “coming soon” to the iOS App Store.
The Internet is changing, with responsive websites quickly adapting to any device and screen size to bring the user the most dynamic experience possible.
From multinational corporations like Sony, Microsoft, and Nokia to global tech stars like Salesforce to online travel giants like Expedia, serious players are turning to responsive web design to march in step with the current trends in and reach an even wider audience of customers.
But making responsive websites has its downsides. The value the site provides to the user is more important than ever, and aesthetics often take a backseat while performance reigns supreme. The problem is that performance cannot be mocked up in Photoshop, and new methods to meet design challenges have to be adopted. So here are 10 problems with creating responsive design websites, along with 10 possible solutions.
1. A More Problematic Visual Stage
In the past, the client had to approve static images and screenshots before development could begin. Today, designing can be a more chaotic and fluid process of sketching and prototyping where the focus is on designing elements and how they will be rearranged, depending on different device dimensions and resolutions.
Fix: There are two approaches to responsive sketching. One approach is creating sketches for a desktop home page, as well as every other website page, and then adapting them for the most popular tablet and mobile screen sizes and dimensions. Another approach is using paper and communicating to the client to demonstrate design layouts and how they will reflow on different screen sizes. Designing in the browser and working with HTML and CSS prototypes starts early on; creating a system of components and seeing how they can be reassembled for different configurations replaces the creation of wireframes for every single page and state. The chosen method is usually dictated by the complexity of the website.
Before responsive design, every user knew where navigation was. Even though today, the three bars at the top left corner of the page usually represent the de facto navigation "button," many users still find it difficult to navigate beyond the menu, especially when it comes to websites with complicated structure. Today, the whole concept of navigation has to be reconsidered.
Fix: Designers should spend more time trying to make navigation intuitive and self-explanatory. Studying the website’s content and information architecture, and understanding users—how and why they browse the site—is the only way to make a unique navigation decision. In addition, testing navigation on as many products as possible can help developers get it right.
3. The Appearance of Background Images and Icons
Images are crucial to a user’s experience on the web. In responsive design, images and icons have to be flexible to allow users to enjoy the graphics on high pixel density devices, which are becoming more widespread. Making sure the images don’t look blurry and poorly scaled up is the goal of every designer and developer.
Fix: Lazy loading images can help optimize browser rendering and reduce the number of HTTP round trips by deferring the loading of images that are not in the client's view. Making icons scalable (using the SVG format, which keeps icons light yet high-quality) and retina-ready can also help users enjoy the website without loss of quality on any device.
4. Showing Data on Small Screens
Showing data tables (airline flight timetables, for instance) on small screens is a real problem when the tables are complex and convoluted. It doesn’t help that they are also often large with a great number of rows and columns.
Fix: Responsive tables are the best bet right now. There are also other methods: abandoning the grid layout and creating a smaller table that doesn’t call for horizontal scrolling; building more compact pie charts out of tables; replacing tables with smaller versions while offering a link to the full version; hiding unimportant elements on small screens with a dropdown menu with access to the full table; rainbow tables where colors are used instead of columns; and even flipping the table on its side to make it fit.
5. Creating Rich Experiences that Load Fast
One of the biggest challenges is finding the balance between a rich user experience and the fast-paced nature of the Internet. Responsive websites sometimes weigh a lot, and because they attract traffic from both desktops and mobile devices, the experience can suffer from slow loading times. This means losing business, as the majority of mobile users leave after five seconds of not getting what they expect.
Fix: The solution is conditional loading, which allows for loading of only what users need, when they need it. The rule of thumb is this: first load content, then enhancements, then leftovers. With users so used to lots of images, galleries, documents, downloads, etc. on awebsite, with the mobile-first approach, designers should take care to keep only the elements that are absolutely necessary to convey the message of the website. Because the proliferation of mobile devices is outpacing desktops, conditional loading is the way to go. And since in conditional loading many automation tools for scaling and caching images are used, it makes future changes to the site easier and faster. Also, assuming that the user connection is not perfect is a must to provide high performance.
6. Longer Designing, Developing, and Testing Periods
Because responsive websites have to work amazingly well on multiple (very different) devices—all while boasting rich functionality and complicated design elements—they often take longer to design, develop, and test. Usually it takes about twice as long to design a responsive site compared to a regular site.
Fix: The problem already contains a solution. Even though responsive sites may take longer to create, they are also better candidates for gradual change and natural evolution. Instead of having to implement major overhauls to a website, which are costly and lengthy, responsive sites can evolve step-by-step, saving owners a lot of time and effort in the long run.
7. Hiding and Removing Content
Websites with complicated UI elements, advanced search features, multi-step forms, data tables, calculators, dashboards with third-party scripts, and so on often pose a problem because they simply contain too much information. The approach so far has been to hide or remove content from users, but many people feel they deserve access to all information, even if they are browsing on a small device. In some cases, there is no way for a user to get the full version of the website they are browsing.
Fix: Thorough planning from the onset that determines where content is arranged in a way that doesn’t force developers to hide anything is the solution. The goal should be to optimize as much as possible, remove unnecessary elements from early drafts and focus on the core structure of the website, without adding any bells and whistles. Now is not the time to embellish, but to prioritize and cut. It is always best to give the user the possibility to have access to the full version of the website, if they choose to do so.
8. Converting Fixed Sites Into Responsive Ones
This is a huge dilemma: is it necessary to change the less flexible code of fixed-layout websites or can they be left as they are and still provide acceptable performance?
Fix: The conversion process is a challenging, but for light and simple websites, it’s feasible and has been done successfully in the past. The choice is often to reverse style sheets and templates or start a greenfield rebuild, which is a process of rebuilding the site without the need to consider any prior work. When you have a bigger, complicated website, a greenfield rebuild is a better option than not doing a conversion at all.
9. Older Versions of Internet Explorer Don’t Support CSS3 Media Queries
When working with mobile-first techniques, your website might not display properly on older versions of IE. In these cases, developers should find a way to support an older website on mobile devices.
10. Not Everyone Understands Why They Should Go Responsive
The process of working with clients is not always structured and orderly, and the methodologies for responsive design are still being refined and tested. Solutions to challenges are rarely set in stone, which sometimes creates uncertainty and confusion for clients.
Fix: Showing the benefits of responsive design in action is the best way to get positive feedback and approval. Responsive design can prove itself a significant advantage in the market in terms of multi-device functionality, making future fixes easy, and appealing to a much widest audience of users.
Even though responsive design is becoming more popular, there are still many questions left unanswered and no official solutions to the challenges that this trend poses. The most important thing to remember is that responsive design should improve experiences, not reduce opportunities for users, and all designer and developer efforts should be aimed at making that goal a reality.
Source: Kirill Strelchenko
Holiday shopping has started, but that doesn't mean the search engines are giving you a break. There have been a lot of deals in the last few weeks, as well as algorithm updates over the last couple of months.