This article was originally published on LambdaTest. Thank you for supporting the partners who make SitePoint possible. When you develop a website, going live is like a dream come true. But then you notice things going wrong after launch and it quickly becomes a nightmare. A friend of mine was so excited as he was about to launch his new website. But when he finally hit the shiny launch button, some unusual and concerning trends started to popup. After delving into the details in Google Analytics, he found out that the website had a very high bounce rate on Mobile devices. The website was a mess on mobile devices, all the elements had left their places and the logo was not even fit to screen. That day taught him a valuable lesson, which he passed on to me, ‘Go through a checklist for cross browser testing before going live’. Cross browser testing is very necessary in this digital world where everyone is browsing the web on a different platform, OS, browser, and you can’t even think of that beforehand. Formulating a perfect cross browser testing strategy might help you in that but sometimes even after that you need to be prepared for some un-welcomed bugs. However, a proper checklist might help you avoid them or figure them out before anyone else does. A Few Pre-Requirements Before Going Through the Checklist Before going on to the checklist you need to make sure that you know how to perform cross browser testing. If you are going to perform cross browser tests, you need to know what browsers and devices you are going to test on. So, formulate a proper cross browser testing strategy. When you have your cross browser testing strategy, make sure you test your locally hosted website or dev site on cross browser testing tools like LambdaTest before going live. The platform has a feature called Lambda Tunnel that gives you the flexibility to connect your locally hosted websites or web apps to test in the cloud for cross browser testing using SSH tunnel. Cross browser compatibility and cross browser accessibility affects your website’s SEO as well therefore it’s always important to get it thoroughly tested and perfectly compatible for site indexing on search engines. Keep mobile devices handy, or you can also set up emulators or simulators. Or you can use a platform that can provide you all the devices you need, like LambdaTest which provides a wide range of iOS and Android mobile devices to test upon. Once done with the prerequisites, the next step is to go through the checklist. The Ultimate Checklist For Cross Browser Tests Before Going Live This helpful checklist will help you make sure you've dotted your i's and crossed your t's and tested all your various elements before going live in your local environment. Alignment of Elements in All Browsers Make sure that the elements are in the correct place that you intend them to be in. Verification of SSL in Various Browsers If you have faced this error, one of the reasons can be that your website’s SSL certificate doesn’t support some of the browser versions. If your user try to access your website those browser versions, then they might not be able to access it at all. So, check your website’s SSL certificates in all browsers before going live. Rendering of Font in Different Browsers Who don’t love beautiful fonts on their website, however they can cause blunders if they don’t render properly. Rendering of fonts is highly affected by the browser in which your site is being browsed. So, you need to make sure that your fonts render the same in every web browser. Read more on Fonts and Browser Compatibility. Compatibility of Media Elements with Diverse Browsers Videos are the most loved form of media nowadays. Web designers and developers have been taking advantage of the fact and you can easily find either a demo video or some tutorial video running on the homepage of a website. But browser compatibility can cause you trouble if you some use unsupported media elements and that’s not restricted just to videos, but to images as well. So before going live make sure that you use those elements that are supported in all browsers or you have a fallback for unsupported elements so that your users don’t face this! Understand Multimedia compatibility with Different Browsers in detail in here. The post Cross Browser Testing Checklist Before Going Live appeared first on SitePoint.
This article was originally published on LambdaTest. Thank you for supporting the partners who make SitePoint possible. Selenium is a popular automation testing framework that is primarily used for cross browser testing. It is open source and is ideal for automating testing of web applications across different browsers like Firefox, Chrome, Internet Explorer, and Microsoft Edge. Selenium has become a renowned framework and is giving stiff competition to other test frameworks such as HP QTP (Quick Test Professional) and AKA HP UFT (Unified Functional Testing). This tutorial for Selenium WebDriver will help you develop a basic understanding of the components of the Selenium suite, the Selenium WebDriver architecture and will show you how to run automation to test a website for cross browser compatibility using Selenium WebDriver for Google Chrome, Mozilla Firefox and Internet Explorer. Selenium is a combination of different tools and each tool plays a critical role in automating web testing. Let’s dive into the WebDriver tutorial. The post How to Use Selenium WebDriver for Cross Browser Testing appeared first on SitePoint.
We're working hard to keep you on the cutting edge of your field with SitePoint Premium. We've got plenty of new books and mini-books to check out in the library — let us introduce you to them. Learning jQuery 3 Fifth Edition A step-by-step, practical tutorial on creating efficient and smart web apps and high-performance interactive pages with jQuery 3.0. Create a fully featured and responsive client-side app using jQuery. Explore jQuery 3.0 features and code examples updated to reflect modern JS environments. Read Learning jQuery 3 Fifth Edition. How to Develop and Test Vue Components with Storybook Learn Storybook, an interactive environment for developing and testing UI components. It allows you to build components and play with them in isolation from the app that you're building. Read How to Develop and Test Vue Components with Storybook. Build a Shopping List App with Vue, Vuex and Bootstrap Vue Build a simple shopping list app using Vue, Vuex and Bootstrap. Along the way, you'll discover how Vue's official state management solution can help you manage state throughout your app as it grows. Read Build a Shopping List App with Vue, Vuex and Bootstrap Vue. Hands-On Security in DevOps Protect your organization's security at all levels with the latest strategies for securing DevOps at each layer of the pipeline. Discover security practices to protect your cloud services by detecting fraud and intrusion. Explore solutions to infrastructure security using DevOps principles. Read Hands-On Security in DevOps. Building a Vue Front End for a Headless CMS Learn how to build a modern blog site using Vue.js and GraphCMS, a headless CMS platform that delivers content via GraphQL, for a faster and more customizable website than using WordPress. Read Building a Vue Front End for a Headless CMS. A New Library Interface If you're a Premium member, take our new library for a spin. We've launched a cleaner, faster library interface that makes tracking and resuming your current books much quicker. And More to Come… We're releasing new content on SitePoint Premium almost every day, so we'll be back next week with the latest updates. And don't forget: if you haven't checked out our offering yet, take our 7 day free trial for a spin. The post SitePoint Premium New Releases: DevOps Security, jQuery & Vue Projects appeared first on SitePoint.
In September of last year, Evan You (creator of Vue.js) announced plans for the next major version of the library. Vue 3.0 will feature an improved experience for TypeScript users, including native support for class-based components, and better support for type inference when writing code. The great news is, you don't have to wait until version 3.0 is released (predicted for Q3 of 2019) to start writing your Vue apps in TypeScript. Vue's command-line tool, Vue CLI, comes with options for starting projects with the TypeScript build tooling pre-configured and includes the officially supported vue-class-component module, allowing you to write your Vue components as TypeScript classes. This article assumes some familiarity with both Vue and the basics of TypeScript. Let's take a look and see how you can start taking advantage of static typing and class-based components in your code today. The post Get Started Writing Class-based Vue.js Apps in TypeScript appeared first on SitePoint.
A significant portion of the data that is generated today is unstructured. Unstructured data includes social media comments, browsing history and customer feedback. Have you found yourself in a situation with a bunch of textual data to analyse, and no idea how to proceed? The objective of this tutorial is to enable you to analyze textual data in Python through the concepts of Natural Language Processing (NLP). You will first learn how to tokenize your text into smaller chunks, normalize words to their root forms, and then, remove any noise in your documents to prepare them for further analysis. Let's get started! Prerequisites In this tutorial, we will use Python's nltk library to perform all NLP operations on the text. At the time of writing this tutorial, we used version 3.4 of nltk. To install the library, you can use the pip command on the terminal: pip install nltk==3.4 To check which version of nltk you have in the system, you can import the library into the Python interpreter and check the version: import nltk print(nltk.__version__) To perform certain actions within nltk in this tutorial, you may have to download specific resources. We will describe each resource as and when required. However, if you would like to avoid downloading individual resources later in the tutorial and grab them now in one go, run the following command: python -m nltk.downloader all Step 1: Convert into Tokens A computer system can not find meaning in natural language by itself. The first step in processing natural language is to convert the original text into tokens. A token is a combination of continuous characters, with some meaning. It is up to you to decide how to break a sentence into tokens. For instance, an easy method is to split a sentence by whitespace to break it into individual words. The post Getting Started with Natural Language Processing in Python appeared first on SitePoint.
We're working hard to keep you on the cutting edge of your field with SitePoint Premium. We've got plenty of new books and mini-books to check out in the library — let us introduce you to them. Hands-On Full-Stack Development with Swift - Packt Build full-stack shopping list apps from scratch for web and mobile platforms using Xcode, Vapor, and Swift. Increase developer productivity by creating reusable client and server components. Develop back-end services for your apps and websites using Vapor framework. Read Hands-On Full-Stack Development with Swift. An Introduction to Data Visualization with Vue and D3.js Learn how to visualize data in your Vue project with charts and graphs, to better convey and communicate information. In this tutorial, you’ll do so using the D3.js library, which combines powerful visualization components and a data-driven approach to DOM manipulation. Read An Introduction to Data Visualization with Vue and D3.js. The Icon Handbook The Icon Handbook is the only resource that guides you through the complete process of designing icons - from deciding on the correct metaphor, drawing clear and understandable symbols, and implementing in your websites and apps. Read The Icon Handbook. How to Build a Reusable Component with Vue In this tutorial we'll teach you how to build a reusable modal component using Vue. We'll guide you through creating a simple authentication modal, creating a component out of it using Vue and then lastly, creating a skeleton modal component which can be copied and reused. Read How to Build a Reusable Component with Vue. Build a Basic CRUD App with Vue.js, Node and MongoDB In this tutorial, you'll learn how to build a simple CRUD app, a tool to help students of a foreign language learn vocabulary, using Node, MongoDB and Vue. Read Build a Basic CRUD App with Vue.js, Node and MongoDB. And More to Come… We're releasing new content on SitePoint Premium almost every day, so we'll be back next week with the latest updates. And don't forget: if you haven't checked out our offering yet, take our 7 day free trial for a spin. The post SitePoint Premium New Releases: Swift, Icon Design, and Vue appeared first on SitePoint.
This sponsored article was created by our content partner, BAW Media. Thank you for supporting the partners who make SitePoint possible. As the saying goes: "an ounce of prevention is worth a pound of cure". More companies than ever are beginning to heed this advice. They're realizing that it is okay to make an extra effort to avoid usability issues. It is far less expensive than having to resolve problems later. Debugging a software application before launch is a standard operating procedure. Any bugs that manage to sneak through can be potential troublemakers. Most problems users encounter are usability issues. These can and should be addressed during the initial prototyping. Check for potential usability issues early in the design phase. Even though this often requires additional time and budget, it saves money in the long term. Designers and project managers need to think in terms of ROI. This is instead of working to satisfy short-term goals. The right tools and resources can be invaluable for getting things right. All this at minimal extra expense. Let's look at several of the best. 1. Mason Mason provides a front-end feature building experience par excellence. Designed for modern teams, it enables them to come together to create front-end features for their apps efficiently and economically. With Mason you can bypass additional prototyping, wireframing, or additional coding to get the job done. Mason integrates seamlessly into your existing code base to significantly shorten development and deployments cycles. It also enables teams to react and adapt to a feature-building state of affairs with lightning speed, often saving a ton of money in the process. More than anything else, Mason's feature-building capabilities allow teams to respond immediately to user or customer needs. Teams can provide users with solutions that are sound, extensible, secure, and reliable; and allow a team's developers to work on more complex or higher priority projects. Mason won't weigh your site or app down. It's an invaluable tool for a team to have on hand when they're responsible for maintaining one or more software products or solutions. It's triggered whenever needed, and only when needed. 2. UXPin UXPin is a designer's dream. This fundamentally different design tool is used in companies like PayPal and Microsoft to build realistic prototypes, with the powers of code components, logic, states, and design systems. With its extensive library of design components, UXPin can be used to create prototypes that look and feel like real products, from start to finish without ever leaving the app. UXPin provides powerful team collaboration and product handoff features as well. Since it's cloud-based, you can prototype and collaborate from browsers as well as desktop apps – both on Mac OS and Windows. Easily iterate from low-fidelity to high-fidelity prototypes that feature complex interactions and look real without a need for any other tools. With this all-in-one web and app design tool, you can ensure consistency across product lines while at the same time reducing design, development, and deployment time and costs. 3. Interfacer Interfacer is a great source of free design resources to have at your fingertips. Their collection of more than 300 resources includes web template libraries, eCommerce, blockchain, travel app and other UI kits, more than 80 different icon mini libraries, and nearly 100 mockup solutions. Feel free to use any of these high-quality free design aids on commercial projects. 4. Webflow If you're in the market for an all-in-one tool to design, build, and launch fully customized and responsive websites, Webflow is a great choice. With Webflow, you can also create a customized and client-friendly CMS for every site and enjoy super-fast, managed hosting, all without coding or troublesome setup issues. Webflow is also the ideal solution for prototyping and for building eCommerce solutions – also without coding. Why should you care about UX and these tools? A Well-Designed UI can Help to Increase Conversions You've been there before, probably many times. Let's say you're doing some comparison shopping for a product or service. You have come across several websites that address your problem. One clearly stands out. You easily found the information you needed. Your experience was in fact so enjoyable that you bookmarked the website. Wouldn't it be nice to be able to design a website or app like that one? Increase Your Brand Loyalty with UX Design A good user experience accomplishes a great deal for a business. Your site's UX can contribute greatly to build trust in your brand, your product, or your service. It can play a vital role in establishing a relationship with your customers. A friendly UX encourages customer activation and fosters loyalty to your brand. Same goes for your products and services. Don't Forget the Importance of Word-of-Mouth Referrals Whether it's a book, a movie, a YouTube video, or a website, people like to share things they enjoy with others. People buy into good experiences, and if you provide them, they're going to tell the world about them. You should make the buying process not just easy, but as easy as possible for a customer. That customer is going to remember it – and recommend it to others to experience. Conclusion What you want and expect from a top UX or UI tool or source naturally depends on your needs. But those we've presented here have several things in common that should appeal to you. They can save you time and money, the tools are fast, efficient, and reliable. The resource for design aids can relieve you of having to reinvent the wheel. The post Looking for the Perfect UX/UI Tools? Check Out These Great Ones appeared first on SitePoint.
As the number and variety of prototyping tools continues to grow, it’s becoming harder and harder to figure out which tools meet what needs, and who they’re suitable for. Since we first wrote this article back in 2015, countless design apps have dominated (and changed) the prototyping space. Stakeholder feedback and user testing is now taking a far greater role in UI design and this new generation of tools aims to connect these two previously separate stages of the design process. Clients want to be involved, and email isn’t cutting it anymore. Some apps like UXPin are also taking care of the wireframing stages, whereas others like InVision App are bridging the gap between designer and developer by offering design handoff tools. Plus, there’s now a clear divide between desktop tools with cloud sharing (Adobe XD, Axure, Balsamiq, Sketch+InVision) and collaborative online tools (Figma, UXPin, Fluid UI, Proto.io). Many of these tools appear to be converging on a feature set that defines the role of the modern user experience designer. TL;DR—here’s a swift comparison of prototyping tools. Adobe XD Adobe may have been caught napping during the rise of Sketch, but they’re rapidly making up for it with Adobe XD. Launched in March 2016, and still in beta as of July 2017, it’s the latest addition to Adobe’s Creative Cloud Suite. While you can prototype interactions in Sketch with the help of the Craft Plugin, Adobe XD impressively offers these tools right out of the box, so designers are already comparing Adobe XD to Sketch like longtime rivals. It’s definitely worth a look if you’re interested in a tool that covers all your bases (low-fidelity prototyping, high-fidelity prototyping, user flows, sharing and feedback) in a single app. Strengths Available for macOS and Windows Everything you need in a single app Weaknesses Still in beta (although pleasantly mature as a design app) Plugin workflow non-existent, you’re locked into the Adobe ecosystem InVision App (with Sketch and Craft) InVision App is the largest and most successful design collaboration tool currently on the market, the primary go-to tool for serious designers and enterprise teams alike. With tools like whiteboard collaboration, dynamic prototyping, comments, device preview, video calling, user testing, version control and design handoff, InVision is already a colossal force in the prototyping space, but when you factor in its Sketch and Photoshop integrations, it becomes an all-in-one design suite, especially when you throw in Craft, the Sketch/Photoshop Plugin that brings a lot of that functionality directly into your design app of choice. Strengths Powerful, mature platform Fully-integrated with Sketch for high-fidelity design Constantly being updated with new features Weaknesses Feature-set can be a little overwhelming at first Sketch is only available for macOS users only (but you can pair InVision with Photoshop on Windows, although Photoshop isn’t strictly a UI design tool) Marvel App A very strong favourite for those looking for simpler, friendlier alternatives to InVision App. Marvel App has excelled at creating a prototyping tool that works for both advanced UX designers and those simply looking to communicate high and low fidelity concepts. Plus, while they champion working with Sketch, they also offer component libraries to allow for a complete online workflow in Marvel. Marvel App also recently integrated fan-favourite POP, which allows designers to transform their pen/paper ideas into iPhone and Android apps. Strengths Great support for transitions for additional realism Friendlier for non-designers, especially when giving feedback Weaknesses Web based only No offline designing UXPin UXPin is the most complete online solution for UX designers in terms of their offering. While you can import from Sketch and Photoshop, you can also design complex and responsive interfaces with UXPin’s built-in libraries, making UXPin something of a wireframing tool as well. With their design systems features, UXPin becomes one of the most complex tools in terms of automated documentation, designer/developer handoffs and collaborative features. Strengths Responsive design with breakpoints Powerful animations (not just linking screens) Complete design collaboration and handoff solution Weaknesses A little pricey versus the competition at $49/user/month Additional features increase the complexity of use Webflow Webflow is a visual tool for designing responsive websites that also exports clean code—it removes the headache of going from design to published on the web. Competing as much with WordPress as it does with Sketch App, Webflow lets you design fully functional responsive websites incorporating back-end (API) data and can automatically deploy to fully scalable, worry-free hosting with a single click of a button. It’s basically Adobe Dreamweaver for the modern-day designer who cares about clean code and mobile-friendly web design. Strengths Real data can be included (from APIs/JSON/etc) Creates high-quality, reusable code Responsive websites can be designed and deployed with ease Weaknesses Not useful for designing native mobile apps Requires some knowledge of HTML/CSS to be at its most effective Figma A somewhat recent addition to the prototyping space, Figma boasts the most mesmerising real-time design collaboration features of any prototyping tool while modelling its feature-set on many of the intuitive design tools of Sketch and Adobe XD (such as symbols and device preview), along with a bunch of tools usually reserved for the online crowd (such as versioning and design handoff). Version 2.0, launched in July 2017, includes a prototyping mode with hotspots and developer handoffs to further streamline the design workflow. It works in the browser, on macOS, and on WIndows, although it sometimes can be slow. Strengths Real-time collaborative design features are second-to-none Fully-featured, ideal for designers from start to finish Weaknesses Figma can can be laggy at time, especially with real-time collaboration 9 More Prototyping Tools Worth Considering Fluid UI With a strong focus on simplicity and communication, Fluid UI includes built-in high and low fidelity component libraries, live team collaboration, device previews and video presentations making it a top-notch solution for designers, product managers and founders alike. Proto.io Mature and feature-rich, Proto.io is best used by designers looking to create high-fidelity and highly-animated prototypes in the browser. Axure RP 8 Established way back in 2003, Axure is an excellent choice for UX designers who need to create specifications for designs and animations in supreme detail. Axure’s includes support for conditional flow interactions, dynamic content and adaptive/responsive design, as well as high and low-fidelity prototyping. Axure is a serious tool for serious designers. The post 15 Top Prototyping Tools Go Head-to-Head appeared first on SitePoint.
Firstly, the backstory. In 2013 the popular Cook app was launched, and it’s great to reflect on the journey it’s been through. I love to cook. This is probably not surprising for someone who created a cooking app. As a child, some of my earliest memories are of sitting on the kitchen bench watching my mother cook amazing food for all manner of social events, and getting to help stir or participate in other small ways was a highlight for me. I really think food holds many memories. The smell of food, or the type of dish you’re eating, can take you back in time — in much the same way music has the ability to trigger memories of different times in your life, reminding you of people and places from your past. It was the memories of the past that led me to think of a digital recipe book being a good idea for an app. I was chatting with my mother one day and asked her where my grandmother’s baked custard recipe was. She responded, “Oh, I don’t know. I don’t think she ever wrote it down. She just did it from memory.” I was horrified. It was a simple recipe. But at the time I asked the question, my grandmother had been dead for ten years. That meant the recipes I recalled from my past — simple though they were — had now been lost with her. My grandmother isn’t any different from many home cooks who have an array of recipes they cook so often they know how to do them from memory, and so never write them down. Recipes can represent your heritage in many ways. My grandmother’s was a simple recipe, and I could probably easily recreate it from a web search. But this particular recipe held special memories of baked dinners and times spent with my grandmother. Because she didn’t write it down, it was lost now — never to be recovered. So Cook was first imagined as a way to preserve the heritage of family recipes — helping to overcome the loss of handwritten recipes over time, assisting to preserve recipes from generations of family cooks. By digitizing the old world of index cards, tatty old recipe books, or other random means, my hope was to enable family recipes to be captured and shared with future generations. Digital meant that recipes could be handed down more easily and not lost to a time gone by. The Opportunity to Do Something Knocks Like many people who have a killer idea for an app, I did nothing with this idea for ages. I was just another person that imagined a “great idea” for an app and bored people with that idea at dinner parties. Then, in 2011, SitePoint approached me to write a book on UX. SitePoint is a publication mainly aimed toward the developer community, so they suggested that a case study would be useful in bringing the value of UX to life for their readers in a more tangible way. UX has often been viewed with skepticism in terms of tangible, measurable benefit. In those days, it was still kind of new to consider “the user” of a product as you developed it — as crazy as that sounds. So I discussed with my editor Simon the idea for the app, and that we could incorporate the story of it into the UX book. We imagined that each chapter could talk about the key methods to follow, and that the app would be the living and breathing example of how we put the methods to work in order to bring the app idea to life. In this sense, Cook became the case study for taking a “human-centered design” approach to product design. So, by writing the book we were able to mature the idea of a recipe app a bit further, taking an educational approach. The UX Rules of Product Development Whenever creating a product, you should ask yourself three simple questions: What problem needs solving? Who are you solving it for? How are you going to measure success? What Problem Needs Solving? Quite often this gets answered as a product is imagined, and Cook was no different. I was a passionate home cook that thought there was potentially was a gap in the market, based on a pain I had encountered. Although it’s wise to never think you are your users, this is the way many ideas start. And this thought spurred on the idea for a digital recipe book. Exploration of that idea comes next. As part of the process of exploration, we needed to scan the landscape. What else was out there? Were we the only ones with this idea? How could we be inspired by the competing and complimentary offerings that existed? Had someone else beaten us to it? This task proved to be a scary one, as we discovered the cooking app landscape was littered with famous celebrity chefs. Jamie and Nigella were everywhere. I was a passionate home chef, but I was no MasterChef. Eeep! However, regardless of the talent in the space, the design gap still remained. There was no app we could find that presented people with a stupidly simple means of creating recipes and storing them digitally. There were many complex ones that were hard to use. And therefore, not only was there a gap, but there was an area that we could easily differentiate — simply by being easy to use. Who Are We Solving It For? The problem we were solving for was, to my mind, home cooks. Passionate, average, everyday cooks, the type of people that had their own recipe scrapbook full of favorite recipes from times past. Collected from family and friends over the years. This focus is why we initially named the app “Family Favorites”. It said what we intended — but it was a bit lame in selling the dream from a marketing perspective, and also tended to pigeonhole the target audience in a way we didn’t want. That is, it seemed to say “families only”. We knew we had work to do on the name and on giving it a broader appeal. Nevertheless, the placeholder name held for a while as we got on with the business of researching and creating the app. We’d think about the name later. Measuring Success Obviously, the easiest measure of success was going to be people downloading it and using it. Actually, creating recipes within the app was going to be the main measure of success at this stage. This measure would change over time as the design and concept evolved, but, at a basic level, if you’re downloading an app and using it, it’s a good basic success metric. We agonized over whether to charge for the app or not, and we eventually decided we needed eyeballs in the early days. So the app would be free, so that there was no barrier to people downloading it. What Taking a “UX” Approach Means in Practice We ate our own dog food and followed a “human-centered design approach” (HCD), or “UX” approach. This approach is more commonly understood and accepted nowadays as a beneficial approach to product development. But what does it mean in practice? HCD, UX, even service design (SD), are all very similar in their philosophy: that is, to design by putting the human at the center of your design process — considering their needs upfront and throughout the product development process, being prototype-driven (that is, experimental), and iterative (that is, changing your mind and updating the design, based on what you learn from exploration and validation with people). It’s stupidly simple. We did all these things developing Cook. It works. I’ve often told the story of how I recruited people to take part in some concept exploration research before we started designing the app. I did this across a weekend — the only time I could fit it in around work. I told participants I was going to come over to their house, and I wanted them to prepare and cook for me one of their favorite recipe dishes of all time. Everyone I tell this story to laughs and says the same thing. “Nice one! You just wanted to be fed!” Without doubt, it was one of the most enjoyable sessions I’ve ever run, and I certainly loved the many and varied outputs. But that was part of the real trick — to ensure they didn’t really know what I was exploring. From a process perspective, I sent them a homework activity to complete before I got there, so we could talk about it. The homework task was to create a poster that combined words and images to show how they feel about cooking (this helped prime them to the topic). They knew I was going to arrive and chat to them while they prepared the dish, but they didn’t really know what it was I was researching beyond that. As they prepared the food, I asked them questions about the dish they’d chosen, and watched to see if they used a recipe, and where they had the recipe as a reference. (Was it in a recipe scrap book? Was it in a book? Index cards? From memory? Other?) I intentionally didn’t talk about storage or recipe management too much. That part I observed. I talked to them mainly about their love of cooking, how they came to find this recipe and how it ended up being a family favorite. I talked about how they came across new ideas for cooking dishes and where they kept things stored. But we didn’t ever talk about whether they thought a “digital recipe app” was a good idea or not. The trick to good research is to explore around the edges of what you’re looking at, and not let the people you’re talking to necessarily know what you’re actually researching. You gain real insights from observing people’s true habits and behaviors, rather than by asking direct questions about their habits — which just puts people in a position of making up an answer if they don’t know why they do what they do. Most of the time we don’t know why we do things. We just do them automatically. It’s a habit we’ve formed for some reason, and it serves a particular purpose for us. Exploring the purpose around what we do, and why, is the job of a design researcher. This comes to another thing about design research: we explore the way users work and live in a more contextual manner, and from that we gain inspiration for design. People often forget the little details of routine, so going into their environment helps us make connections that they might not think to articulate. Design research is intended to explore the design gaps and facilitate a better understanding for how users’ needs can be met — so that we can design better solutions for them. One of the central tenets of HCD is to go to the extremes. Don’t just engage with people you think you’re creating the product for. Go to the edges and get inspiration from the types of users who might never want to buy your product. The anti-users and the experts often give you the best hints for how your product can differentiate itself and appeal to a broader market. The people I recruited to participate included passionate home cooks, people who couldn’t cook, people who hated cooking, and professional chefs. What I Learned that Changed My Thinking The idea we went into research to create was quite different from what we came out with. We went into concept research absolutely sure we had an opportunity to create a digital recipe cookbook that people could store their recipes within. The ability to be digital meant cherished recipes would never be lost, and you could keep adding to your digital cookbook indefinitely. What we missed with this perspective, however, was the gap for sharing and swapping recipes. And we also totally underestimated people’s voyeuristic, idle curiosity about what other people cook and eat from day to day. It’s funny. I’m a passionate home cook. But I was so focused on what I thought the product needed to be that I totally overlooked many things that user research helped me open my eyes to and refocus on. In this sense, my own bias about the product made me overlook critical product features that would help make the app really special. This points to a few things about research. As a human, you have a lot of biases and self-fulfilling tendencies when creating a product you’ve been personally invested in. You really need to watch that. It’s part of being human, and hard to control. Being aware of it and testing your assumptions with real people other than you is critical. As a design researcher, you have to be open to changing your mind about what you think you know to be true. This is product design, not art. The purpose of design is to ensure it’s as good as it possibly can be for the eventual end users. You need to accept that your initial wonderful idea might not have it all covered. You need to change your mind, and your design approach, based on what you learn. Otherwise, you’re just creating art. This self-reflective moment is essential for design researchers. Your humble attitude to being open to new ideas, and changing your design accordingly, is not only essential, it’s critical to your success. The Critical Aha Moments People who love to cook often are friends with other people who love to cook. Swapping and sharing recipes is something they do. But as we learned, it’s a difficult and messy process. This was the first aha moment. When we unpacked the research, we realized we needed to make Cook more than just a digital recipe book. We needed to facilitate sharing. It needed to be a social network for recipe sharing — enabling you to connect with friends and family and access each other’s recipes. Another aha moment was discovering that people were fascinated by what other people cooked and ate. Not the exotic or highly skilled cheffy stuff, but the everyday meals that were quick and easy were interesting to people. Ultimately, they wanted inspiration for their everyday. But it had to be quick and simple — things that didn’t take too long. They were curious about what other people were doing in the kitchen on week nights, when they were pushed for time and were preparing for the week ahead. Another critical aha moment was that people’s voyeuristic food tendencies weren’t limited to the banality of the local day-to-day. They were interested in the day-to-day food from other cultures. We discovered that many people attend cooking courses and buy recipe books from countries they visit. And while they’re interested in the exotic and higher-brow stuff, they’re also interested in the day-to-day. This opened our eyes to the prospect of a global recipe sharing network, which would facilitate users seeing what everyday cooks in other countries cooked regularly. This led to two things: we launched the app globally, rather than just in Australia, and we partly focused recipe browsing on where recipes were submitted from. So one of the main navigation features was the “world books”, which allowed you to see what the everyday cooks in the UK, or USA, or Singapore were cooking. This may seem like a little thing, but to me this really was one of the coolest features of Cook. Yes, people in the USA have an inordinate amount of Oreo Cookie recipes to share, and people in Italy have an amazing stash of pasta dishes. Another aha moment was considering how to assist users to “fill up” their recipe book without having to actually write out recipes. People who had recipe scrap books had been adding to them for years — and still they might not have had many recipes within them. This was a concern for us. For Cook to be successful, you needed to be able to have it all, and it needed to be super simple. We knew that searching the Web was a common way to find recipes. So the need to search the Web for recipes and add them to your book was clear, but another way to help build out your book was to be able to add recipes you found within Cook, from across the global selection. This helped to save the things you loved as your own, and also helped to fill out your book quickly and easily. These things may not appear to be much. But they were a fundamentally different way to design and build out the app. And we were able to then do these things because we did this research up-front, before we had started to build or lay down foundations that were going to be hard (or impossible) to change. We were letting what we’d learned reshape our thoughts of the Cook app, which was a great position to be in. Where We Are Now Cook launched in 2013, a year after the launch of the book Killer UX Design, and I’m pleased to say we’re still rated one of the top 20 best apps for the food and drink category. We’ve had 1.5 million downloads to date, and there have been 800 thousand recipes shared through the app worldwide. Cook is featured on iPads in the Apple store around the world. In fact, I’ll never forget going into the Apple store in NYC and seeing Cook on the iPads on display. Wow! What a thrill that was. The app has many dedicated users who love and cherish their digital cookbook. I don’t think I could have dreamed of a happier ending. Like all start-ups, we always managed Cook on the side of our day jobs. And it’s the same right now. We’ve never received any funding and have been keeping the dream alive through our dedicated community of Cooks, who create and share content via the app daily. We never did change the charging model, so to date, Cook has brought us lots of grateful moments, but no money. As we mentioned, we decided to remove all barriers for download and therefore not to charge for the app. To this day the app is free — an expensive decision, but the right one at that time. The funniest thing about apps is that you ask someone to go to a different bank ATM and pay $3 to extract money and no one batts an eyelid. You ask someone to pay $3 for an app and they’re up in arms! And so not charging for Cook is something we’re going to reconsider. It’s certainly hard sometimes for people who use Cook to understand that there are only about two people overseeing that app. So right now I’m looking for funding to keep Cook going into the future — a true labor of love. Working with Cook has been a design experience of a lifetime, and one that totally validates the HCD approach we set out to prove. The post How User Research Turned a Good App into a Great One appeared first on SitePoint.