Hero Image Banners – 4 Effective Ways to Catch User’s Attention Before They Scroll

Hero image banners, also called “hero headers” dominate the top of your website or application. Typically, they spread out over the entire horizontal space. Ideally, they have high-resolution images and calls-to-action that get attention from visitors. 

Creative designers have made a variety of hero image formats over the years. A hero section may include navigation buttons that rest on top of the hero image. Other hero sections force users to open navigation bars.

A hero image website design may also change depending on the type of device people use. When you use a desktop computer with a large screen to access a website, the hero section may stay at the top of your screen even when you scroll down. On a mobile device with a smaller screen, though, the hero section may shrink – or even disappear – as you scroll down.

You have plenty of options when making hero image banners that effectively catch a user’s attention before they scroll. Start with these four tips, but feel free to explore unique ideas that fit your product’s brand.

Build a prototype of your website with UXPin, an advanced prototyping tool that will increase design efficiency in your team. Create prototypes that stakeholders and users can interact with. Try it for free.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

Use Bold Colors to Grab the User’s Attention

You & Sundry, a wellness center and barbershop made especially for LGBTQ+ individuals, offers an excellent example of using bold colors that grab a visitor’s attention.

The bright yellow letters in the background provide an anchor for the visitor’s eyes. After the eyes linger there for a bit, though, visitors can’t help but look at the colorful clothing worn by the hero section’s models. 

The diversity of color plays into the company’s brand. It also contributes to a hero image website design that holds a person’s attention and encourages them to explore more.

Write CTAs That Tell Visitors How to Respond

Placing a CTA button inside a hero section can drive tasks completions by encouraging people to follow instructions. Depending on your page’s goals, you may want to generate leads, get people to sign up for a newsletter, or educate them about upcoming products from your company. 

Apple’s page for the iPhone X includes two clickable CTA buttons. One tells visitors to learn more about the product. The other button simply says, “Buy.”

These are the kinds of instructions that visitors need from CTAs. Keep messages short and to the point. Eager, impulsive shoppers will immediately head to the Buy section. Consumers who want to explore their options can follow the Learn more button. Either way, the CTAs provide clear instructions without any ambiguity. 

Typically, you should think about how your button’s design will influence visitors. In this case, Apple wants its product to dominate the page, so it makes sense to put the CTAs inside invisible buttons. 

If you don’t know what text to put on a button, consult content designer. Or, learn about content strategy.

Use Strong Contrasts to Make CTAs Stand Out

CTAs can only accomplish their goals when they stand out to visitors. A hero image website design with too many colors could make the CTA difficult to read. Some visitors might skip the button completely.

Using strong color contrasts will help your CTAs get noticed. The example above takes contrast to the extreme with bold, white text on a black background. The message tells the visitors, “let’s build something amazing together.” Next, your eye gets drawn to the bright white button that says, “Watch Video.” 

Interestingly, the designer chooses to make the “Learn How” button a little more subdued. It doesn’t grab your attention as quickly as the white button, but it does create a pleasant balance within the hero banner’s composition. Without the “Learn How” button, the composition would feel lopsided. With the current approach, the hero banner has nice, satisfying proportions. 

A/B Test Your Hero Section to Determine What Works

Source

You can make educated guesses about what hero image features will drive results before users scroll down. You cannot know whether your design gets the best results, though, until you perform testing.

In A/B testing, you create two versions of your hero section. The control version consists of your original design. The variation can have one or more changes. For example, you might put the CTA button elsewhere, change the CTA’s wording, or choose a different color scheme.

Over time, you track the performance of each design to see which one drives the most results. If the control version gets more conversions or leads, then you keep using it. If the variation performs better, then you use it to replace the original.

You can keep fine-tuning your hero design until you reach a ceiling and your results will not improve. 

Make Effective Hero Section Banners With UXPin’s Design Tool

UXPin makes it easier than ever to design effective hero section banners. UXPin has a design tool that lets you build every aspect of your web page or application. You can use interactive elements like clickable buttons and forms that let users enter real information. 

Once you have a hero section you believe in, you can use UXPin’s prototyping tool and share your work with others. Feedback can play an incredible role in improving your original design. You don’t even have to restrict your collaboration to other people’s UXPin accounts. You can send a link to anyone for feedback.

Are you ready to see what UXPin can do for your hero image designs? Start your free 14-day trial now so you can explore all of the features that make UXPin such an amazing tool for designing and prototyping!

So You Want to be a UX Designer – Google Has a Boot Camp for That

BlogHeader StrategicDesign 1200x600 copy

With the U.S. unemployment rate hovering at around 8%, millions of Americans are in limbo either looking for a new job or unsure about when (or if) they’ll be able to go back to their pre-pandemic employment. 

On the bright side, a tight and unpredictable job market is the perfect time to learn a new skill or make a career pivot. To help bridge the skills gap and get more people trained for the most in demand jobs in the tech industry, Google is launching a new boot camp to train UX designers. 

Google’s New UX Design Certificate Program

Boot camps and career certificate programs in the tech sector have proliferated in the last few years, and grew by over 4% in 2019 according to Career Karma. While many tech boot camps focus on software development and programming, coding is just one slice of the tech industry pie. 

bootcamp 01

User experience design, project management, and data science are all lucrative fields in high demand and with good earning potential. Google has announced a new UX design career certificate to help people break into the field without breaking the bank.

Here are some features of the new UX design career certificate according to Google:

  • Google staff will teach the courses
  • Hosted on the Coursera platform
  • 100% remote
  • No prerequisites or previous experience required
  • Program duration is about six months
  • Doesn’t require a college degree
  • The program is designed by Google and recognized as the equivalent of a four-year degree
  • Scholarships are available for students with financial need

Google’s IT Support professional certificate on Coursera has enrolled over 600,000 students and costs about $49 per month, making it more affordable than typical boot camps and professional certificate programs which can cost thousands of dollars.

While there’s no guarantee that students will find a job as a UX designer after completing the certificate, it’s designed as pathway to connect graduates directly with potential employers.

What skills do you need to become a UX designer?

User experience design is both an art and a science. UX designers perform research, analyze user behavior and trends to create user personas and intuitive designs for websites and apps, and collaborate with designers, software developers, and other stakeholders on every project. 

Some skills you will need be a UX designer and can expect to learn and develop in a boot camp program include:

  • Conducting user research
  • Wireframing
  • Prototyping
  • Graphic design
  • Information architecture
bootcamp 02

Good UX designers also need to master “soft skills” like communication, empathy, collaboration, critical thinking, and the ability to change and adapt from project to project and as industry trends develop and change.

How much can UX designers expect to earn?

UX designers have great earnings potential. Starting and median salaries vary depending on the company and industry you work in, but the average starting salary for an entry level UX designer is over $60,000 (and as high as $89,000) according to Zip Recruiter. UX designers are in high demand, so the job outlook is much better than other sectors of the economy depending on where you live. 

Another advantage to consider is that UX designers have the flexibility to work in several industries and sectors. If you already work in a field or company that you love, you can leverage your experience and existing network to find a new job as a UX designer. Virtually every industry and business – from startups and small local companies to large corporations need intuitive and well-designed websites that meet customer needs and expectations.

You don’t have to work at Google or Apple to earn a good salary or have a lucrative and rewarding career as a UX designer. 

Building a UX portfolio

A resume will only take you so far when you’re looking for a job as a UX designer, especially in the beginning. A strong portfolio that showcases your skills is your ticket to landing interviews and convincing potential employers that you’re up to the task and have the skills they’re looking for. 

bootcamp 03

One of the biggest advantages of boot camp and professional certificate programs is that students typically graduate with a portfolio of one or more design projects that showcase the skills you learned. Instead of just learning theory and processes, you get the equivalent of on-the-job training which will make your job search easier once you complete the program.

There are many UX design tools and software available to help you create dynamic designs and build a strong portfolio of projects.

How to find a UX design job

Boot camp programs can’t guarantee a job once you finish the program, so consider that when weighing your options to decide whether investing in a professional certificate program or training course is right for you. 

That said, the right program can provide the practical training you need and networking opportunities and connections to hiring partners and companies actively looking for UX designers. 

The term “UX designer” is actually very broad, and there are many areas that you can focus within that job description, such as user research, prototyping, or project design. As you work your way through your training, pay attention to the areas and tasks that interest you the most.

Working with a mentor is another great way to expand your network and find job leads and introductions.

Thanks to the growing demand for skilled UX designers, major job sites like Glassdoor and LinkedIn usually have an abundance of job listings across the country and in many sectors. Once you decide that you’d like to become a UX designer, start by making a list of the companies or industries that you’d like to work in. 

You don’t have to wait until you finish your training to think about your next job. If you’re not sure where to start, you could work on a few freelance projects to build your portfolio and network and test a few areas before making a commitment.

UX design is a growing field, so expect to continue learning even after you’ve finished a boot camp or certificate program.

UX Consulting: How To Know When You Need It

You may want to hire a UX consultant before you begin your next product development project. User experience consultants become particularly valuable when you have a team of junior designers or you want to create a product outside of your expertise.

By bringing a consultant in before you start the project, you can create an action plan that leads to success.

At this stage, UX design consultants can help:

  • Establish milestones for your product’s development.
  • Brainstorm features and interactions that users will love.
  • Create a design system that keeps your designers focused on a unified goal.
  • Explain the lean UX design process to improve your project’s efficiency.
  • Anticipate problems that you might encounter while developing a product or taking your product to market.
  • Estimate the cost of developing your product.

Instead of making mistakes at the beginning of your project, you can shorten your development time, lower development costs, and start making features that will attract loyal users.

Bring a UX Consultant on Board When You Start Designing

The beginning of a new project forces you to make a lot of decisions. Many project leaders feel overwhelmed by stress. In response, they experience creative doubts similar to “writer’s block.”

You cannot let the start of your design project falter. Mistakes that happen at the beginning will only create more work for your team later.

Bring a user experience consultant on board at the very beginning of your project so you can get off to a great start.

If you feel like your team needs a crash course in UX, you can hire a consultant to give everyone a UX workshop that will allow them to gain such skills like creating design systems that work. Apart from that they will also learn how to approach designs from the user’s perspective and define goals for the project.

Other benefits of hiring a user experience consultant at the beginning of the design project include:

  • Creating wireframes and early prototypes.
  • Developing icons, color schemes, interactions, and other assets.
  • Choosing an approach to project management that elements waste and improves efficiency.
  • Providing feedback that can streamline the rest of the development process.

Your designs need to make an impression on users within 10 seconds. After that, people are more likely to abandon your product. Using a UX consultant at the beginning of your design process helps ensure that you grab your audience’s attention immediately.

Hire a User Experience Consultant When Your Team Gets Stuck

What happens when your team encounters an unexpected problem during product development? Sometimes, a challenge can encourage your designers to find creative solutions. 

Often, though, people get frustrated by the sudden pause in productivity. They felt good about their work, but now they struggle to differentiate between great designs and terrible designs.

Hiring a UX consultant when your team gets stuck offers a fresh perspective on the problem. 

Your design team might feel lost because it naturally wants to keep moving forward with the project as planned. An outsider can look at the situation without the emotional baggage that comes from expectations and hours of hard work.

A consultant also has the benefit of working with diverse clients. Working with many clients means that UX consultants learn from companies that design a variety of products for different audiences. The consultant may already know a solution that will put your team back on the right path to success.

Get a UX Design Consultant About Halfway Through Your Project

Once you reach a project’s midway point, you have an opportunity to look back and reassess your work. If you discover unappealing or dysfunctional aspects of your work now, then you can correct those mistakes before moving forward.

Do you and your team have a clear vision that lets you review your work objectively?

This is a great moment to have a UX design consultant go over your progress. Hopefully, the consultant will find very few problems with your work. Then, you can sprint through the final steps of developing your product. If the consultant notices some issues, you still have time to fix them without ruining your design schedule.

No one likes redoing work, but it’s better to correct mistakes halfway through a project instead of waiting until the end when you have much more to fix.

Hire a Consultant Before Taking Your Product to Market

The moment you take your product to market, you will start hearing about all of the good and bad features that you included. User feedback plays an important role in improving your product, attracting more customers, and generating more revenue.

You don’t have to wait until you release the product before you make those improvements, though. Instead, you can hire a UX consultant with experience reviewing products, noticing irregularities, and troubleshooting features that don’t work perfectly. Use the information to improve your product before giving users access.

You want to release a product with as few bugs as possible so you can get better reviews from experts and users. You will probably decide to make some changes as you gather data about how people use your product. Still, it helps to start with as few problems as possible.

UXPin Makes It Easy to Work With UX Design Consultants

UXPin’s features make it easy for your team to work with user experience consultants at every step of a project.

Many teams choose UXPin as their design and prototyping tool because it allows them to build prototypes that work just like finished products. The prototyping features lets consultants experience the design as the real thing. Consultants can even use real data when they test your design interactions.

UXPin also makes it easy to share your prototypes with consultants. Your consultant doesn’t need a UXPin account to review your prototype. Instead, you can send a link that lets the UX expert access your work. The link lets anyone experience the prototype. They don’t even need a password.

Start your free trial with UXPin so you can experience the benefits of using a tool that combines the features of designing and prototyping software. Once you see how UXPin helps your team collaborate with consultants, you’ll want to sign up for full membership.

Creating A User Research Plan (with Examples)

BlogHeader UXResearchPlan 1200x600

UX research helps to test hypothesis you have about users prior to design. Sadly, not every UX design project starts with user research, and that’s because it takes a lot of time to recruit participants, run UX research projects, and sumamrize findings.

Good research, nevertheless, ensures that your product team doesn’t build the wrong functionality that would cost you valuable resources and make you vulnerable to losing customers.

In this article, you’ll see how you can use UX research plan to get stakeholder’s buy-in and create research reports that’s full of valuable advice for product design. Let’s go.

At the end, when you have your research complete, launch the right tool for your design process. For that, try UXPin, an end-to-end design tool for interactive prototyping that brings design and product development together.

Designers can create a powerful prototypes, show them to product managers who can interact with the design instead of just looking at it. Then, they give the design to engineers who can get all the specs and some code to kickstart front-end design with.

Since with UXPin you work faster, you have ample time for UX research before UX design. Try it for free.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is a UX Research Plan?

A UX research plan helps to set expectations and document the essentials you need to communicate to stakeholders and clients. Your company needs a strong business case for every user research session, complete with research objectives, goals, methods, and logistical needs for the study.

UX Research Plan Elements

Every UX research plan should start with a solid outline. That’s where templates come in handy. They help you structure your UX research project in a way that team members and stakeholders see value in completing research process.

Master templates are the best way to create a successful and effective UX research plan. Using a template as a starting point makes planning and writing easier and helps you and your team stay focused on the who, what, why, and when of research. Read on for tips and examples for how you can build a user research plan that works.

UX Research Plan Background

The background section should offer your clients and stakeholders a few sentences on why you are creating a user research plan and what it will accomplish. It should orient readers to the needs and expectations behind the purpose of the study. It should also include a problem statement, which is the primary question you’re setting out to answer with your research findings. 

Example Background

The purpose of this study is to understand the major pain points users experience in using our website/app and how these contribute to issues such as cart abandonment, returned items, and low customer loyalty. 

We will be using usability testing to follow the user’s experience of our website/app and the obstacles they encounter leading up to the point of purchase. We will also be using generative research techniques to better understand the customer’s experience of our brand and the challenges and needs they face in making a purchase. 

UX Research Plan Objectives

Before getting into the nitty-gritty of your user research plan, you first want to focus on your research objectives. This step outlines the reasons you are conducting a UX research plan in the first place. Why are you carrying out this research? What are the end goals you have after completing all the work?

Seeking out answers to these questions should be a collaborative effort between you and your stakeholders. It’s also helpful to consider discussions and learnings from past clients and projects to create metrics for your UX research plan. 

Objectives and Success Metrics

Research objectives will be different for every project, but they should always be actionable and specific. 

Example Objectives

  • Understand how users currently go about tracking orders on our website
  • Understand what actions customers take when they consider buying a new [product we offer]
  • Learn about competitor websites/apps customers are using to buy [product we offer]
  • Evaluate pain points customers are experiencing in using our website/app

And here are some examples to help you determine the success of your UX research plan.

Example Success Metrics

  • What information are we trying to collect about users?
  • What scales/documents/statistics do we intend to create?
  • What decisions will these materials help to make? 

UX Research Plan Methodology

This step should be a short and sweet description of the research methods you will use to answer the research objectives. It should include both secondary and primary methods. Generative methods, such as user interviews and open-ended questions, help uncover motivations or more general insights, while UX testing helps to evaluate the usability and experience of your product. 

UXRP 01

Research Scope & Focus Areas

Clearly outlining the research scope and focus areas helps to facilitate efficient user research planning. The more you’re able to hone in on the specifics of what information you are wanting to collect, the less overwhelmed you will be in the process. It also helps avoid inundating your clients with unnecessary information. 

To keep research-focused, this section should include:

  • 3-6 question topics (e.g. How do users spend their time on a website?)
  • Design Focus Components, including interface qualities (e.g. Usability, Training, Efficiency, Satisfaction)
  • Primary User Scenarios (e.g. Scenarios in which pain points are most problematic; scenarios you have the least information about, etc.)

Example Methodology

For this study, we’re conducting a 30-minute usability test to evaluate our user’s experience of our app/website. A secondary method will be to conduct one-on-one generative research interviews to better understand our customers and empathize with their needs. 

UX Research Plan Participant Profiles

Once you’ve defined objectives methodology and focus areas, it’s time to outline the participants you’ll need to get the required insights. Participant profiles help you determine who you want to recruit, or an approximation of your users, to optimize recruiting efforts. Here are a few examples of how to ensure you’ll get the best participants for your study. 

UXRP 02

Define your target user by collaborating with internal stakeholders, marketing, sales, and customer support. With their help, you can create approximations about who your users are. This is a great starting point for finding the right participants for your study. 

Compare yourself to your competitors and create participant profiles based on their audiences. Recruiting people who use a competitor’s product can be an excellent way to glean insights into how to further improve your product. 

Outline a screening process. Participant profiles should include any relevant information concerning your target audience, including behaviors, needs, demographics, geography, etc. Including the right criteria will help you evaluate whether or not to include certain individuals in your user research plan. 

This Nielsen Norman article offers some great information about defining and recruiting the right participants for your study. 

UX Research Plan Timeline

This is optional, but many UX research plans include a timeline that offers clients and stakeholders a general overview of how long the research will take. It helps to set expectations for the final results as well as allowing you to create a schedule for research sessions, debriefing, follow-up, and deliverables. 

Timeline Example: 

Approximately 6-8 weeks for identifying objectives, creating participant profiles, recruitment, in-person meetings, qualitative research, and analysis. 

Try an End-to-End Design Solution

UX research plan templates are essential tools for executing a successful project. Having a master template helps you to remember what the process entails, communicate essential information to the right people, and stay on track throughout the user research plan.

UXPin, besides being a great prototyping tool, makes creating such research templates fast and easy. Especially since each project will be a little different and plans will need tweaking in terms of structure and content. Try UXPin for free.

Average Cost of a Well-Done Website Design (Or Redesign)

BlogHeader WebsiteDesignCost 1200x600

The average cost of website design is anywhere from a few hundred dollars to tens of thousands of dollars. There are several factors and options that will affect the cost of your project, which is why it is hard to pin down the exact cost of such an endeavor before you begin. While it may seem overwhelming in the planning process, this is actually a good thing, because it means you can find an option for almost any budget.

Website Redesign Options

In House

In House UXPin Design

Doing a redesign in-house depends on your infrastructure. If you’re a startup with a team of just one or two people, this may be an impossible task if you haven’t redesigned a website before. However, there are tools available that can make the project a bit easier, and plenty of free videos to watch online. In this case, the hardest aspect is the amount of time it takes. Doing it completely on your own can cost as little as $150, which represents the cost of web hosting, a URL, and an inexpensive premade template.

If you are a larger company with a team of tech experts, doing a web design project may be a bit easier. However, having your own in-house team of designers will cost more as you will have to pay salaries, benefits, and other overhead costs.

Pros

  • In-house designers are always  easy to contact in case of any changes or updates.
  • The web design teammates are already your employees who are familiar with branding and messaging.

Cons

  • Can be a lot of new overhead if you don’t already have the knowledge or proper staff, however, it may be a great investment.

Hiring Freelancers

Hiring Freelancers

Hiring a freelancer is a great way to get an expert on your side. Most people don’t have web design expertise, so hiring someone from outside of your organization makes sense. Working with a freelancer can cost anywhere from a few thousand dollars up to $15,000 depending on the size and features of the website. This is one way to get the out-of-house experience for a bit cheaper than an agency. Freelancers can set their own schedule, so they may be able to have more flexibility with timing in terms of your project. Although, there is a bit more risk when working with a freelancer.

Pros

  • Costs are lower than hiring an agency.
  • May be able to devote more time to your project.
  • Brings outside expertise to your business.

Cons

  • Individual compatibility is very important – you have to find the right fit.
  • There is more risk because you rely on one person for the entire project. If something happens in their personal life, you may be out of luck.
  • They may have a specialty or expertise but may lack other skills.
  • Can be difficult to verify the quality of prior work before hiring.

Working With an Agency

Working With an Agency

Agencies are businesses that are fully devoted to marketing, branding, and web design. They are the most expensive option generally, but they also bring diverse experiences and specialties to the table. Agency website design prices start around $10,000 and go up to $50,000 or more depending on the project. Why work with one? They have teams and networks of experts who can bring their professional experience to your business’s redesign. They also have a lot of infrastructures to support new endeavors. However, they usually work with multiple clients so they may not have the bandwidth to deliver your project super quickly if you are on a short deadline.

Both freelancers and agencies generally deliver completely unique solutions for their clients. A custom website design cost is generally higher than a template site, as reflected in the price of working with a freelancer or agency.

Pros

  • Gives you access to a variety of experts.
  • Agencies generally have ways to verify legitimacy and quality like testimonials and reviews online.
  • Has infrastructure to offer support beyond the project completion date.

Cons

  • Most expensive option.
  • May move slower with more team members.
  • Agencies have multiple clients at one time so they may not be as flexible.

What to Include in Your Website Redesign

A website redesign cost also depends on what features you include. It is about much more than just getting a new look for the site. It should be a full revamp for everything from the ground up. Consider the following aspects that may add to the cost but will make your site competitive in our digital world.

Upgrade Your Technology

Make sure that the technological components of your new website are up to date. For example, it should be responsive, meaning that it looks great on any device. A responsive site automatically detects which device is being used and displays the appropriate site version. It has been shown that up to 60% of web users won’t visit a site again if it is not responsive.

Another technology focus should be search engine optimization, which is about more than just keywords and content. These days, it also includes the amount of time your site takes to load, whether or not it is mobile-friendly and overall user experience.

Revamp Your Content

Content is an important factor for many reasons. Content affects search engine optimization, branding, marketing, and user experience. If your redesign has occurred along with a rebrand, make sure your content is in line with your new branding materials. Come up with a content plan and schedule that reflects the new look and feel of your site. Consider doing more than just creating written content. Photos, videos, and audio content can add a lot to your website and make users engage with your content even more.

Consider New Brand Graphics and/or Marketing Images

If your website design is a bit outdated, chances are your graphics and images may need a revamp as well. Consider adding this into a redesigned package to give your website a completely new look. It may add to the cost but it will be worth it to have a completely cohesive new website complete with graphics, logos, and images.

So, How Much Does Website Design Cost?

The answer to this question is not simple. There is a huge range of price. First, figure out your budget, and then find the option that works for that. If you have just a few hundred dollars, you may have to do it yourself. If your budget is more, you can choose to work with a freelancer or an agency. Wherever you start, remember that most businesses redesign or update their sites every 3-5 years, so it won’t be too long before you’re doing it again!

Using UXPin for any redesign process makes it easy to create a new website from start to finish, while collaborating with multiple people. Thousands of top companies use our tools to make web design a streamlined process. Read our testimonials to find out how UXPin can help your business, then contact us to get started!

See how easy it is to start working with UXPin.

Interaction Design (IxD): The Next Step for UX Designers

BlogHeader IxD 1200x600

There is no single definition for interaction design. However, much of its character shapes digital products, services, artefacts, and spaces with a strong emphasis on user experience. The field is broad, user interaction is diverse and dynamic and involves aesthetics, motion, sound, space. With these elements becoming more granular, i.e. sound design for the crafting of sounds used in user interactions (games, installations, industrial work areas). IxD takes a multifaceted view on the social, cultural and business context for which a digital artefact resides.

IxD/UX

What is Interaction Design?

Interaction Design is essentially the practice of designing interactive digital products, environments, systems, and services. It focuses on creating a flow where a user can locate and manipulate information quickly and in a succinct manner. The notion of usability in a digital product is often associated with good interaction design. Ultimately a design is a plan to make something new for people that they perceive as beneficial and IxD examines the interaction (via an interface) between a system and its user. Interaction Design is heavily multidisciplinary with labs usually containing a mix of disciplines such as computer science, HCI, anthropology, industrial design, informatics, and applied physics and electronics. 

Interaction Design

Interaction Design

User Experience (UX)

Interaction Design and UX is used homogeneously in cultural discourse. There is no doubt the two disciplines share many characteristics. A large section of UX concerns a user interacting with a product, however the two are not synonymous. UX Design is a higher-order concept that encompasses numerous design aspects along with a user’s journey on a system, platform, software, or application. It includes UI design, Ix design, communication design, application design, information architecture and more. The goal of UX design is to induce a positive feeling for the user when operating on the device – this encompasses a wide variety of disciplines and techniques. Whereas Interaction Designers are concerned with the moment a user interacts with a product; their objective is to improve the interactive experience. The moment of interaction is just a part of the journey for a UX designer; UX must focus on all user-facing aspects of a product or system. The IxD designer focuses on the choreography of the interaction; if the exchange is quick, intuitive and pleasurable, their job objectives are satisfied.

What Is Good Design?

What does good mean? Is it possible to measure or analyze? The answer is not black and white, but some characteristics pertain to good design. When we interact with everyday artefacts, like a car, we don’t waste mental energy analyzing the interaction: we think about where we’re heading and what we want to do. The interaction is intuitive; removing the conscious thought needed to operate the system, leaving us to concentrate on our goals. When one designs a computer-based system or digital artefact, they’re focusing on how it behaves and not just aesthetics. The quality of interaction is more important, and this is the skill of the interaction designer.

Consistency

Consistent design is intuitive design. A specific command in one part of the system should initiate the same response in another position. The Apple II is an example of this; one knew what to do at all times. A command in the database behaved the same within the word processor; one was never lost and rarely made a mistake, regardless of your position within the system the escape key took you back up a level – consistency promotes user learning and avoids confusion. Compare this with contemporary “integrated” applications. Consistency and simplicity is a difficult combination to attain but when executed, produce timeless affectionate tools for the human race. Check out our webinar on Balancing UX Consistency for a practical deep dive.

Perceivability

Perceivability invites interaction and acknowledges that our experience of any interactive product must first pass through our senses. If an interface can engage the user’s senses, it will inherently be more comfortable for the user to perceive and understand the elements use case and how to performs actions with it – the louder the voice of a satnav, the stronger the vibration of a mobile phone or the bigger an icon on a screen; each stimulus catches the users attention and elucidate subconscious meaning. Obscured interfaces and interactions decrease usability and intuitive play; one must not have to guess or act out of desperation or rely on luck and random discovery, the user should be able to interact with the system intuitively without conscious thought.

Perceivability

Affordance

Affordance is essentially the perceivable characteristics of an object, for example, shape, size, colour, location or texture, which determine the tactile possibilities of the artefact; it is possible to stretch the concept of affordance into the virtual world. A physical button affords to be pushed down. The virtual representation of a button on a website evokes the affordance inherited by the physical object it evokes, elucidating to the user that they can press it (i.e. click on it).

Constraints

Constraints limit the range of interaction possibilities for the user; restrictions prevent users from following dead-end paths, making mistakes, and of course, it guides the user to make the appropriate next action. Constraints clarify direction; limitless possibilities confuse. For example, on particular pages, the menu items of a website may be temporarily disabled. A technique to mitigate against this and avoid frustration, may include greying out items to signal that it’s inoperable or defective.

Feedback

Reassuring feedback is central for interaction design, how does one know when an action is initiated and if it has been successful or not. Let’s take the humble keyboard as an example; we understand the implications of our actions. by the characters appearing on the screen and the tactile sensation of pressing keys and of course, the aural feedback.
Feedback

Navigation

One needs to orient oneself within a system, intuitively knowing how they can go somewhere and how to get back – Macintosh and Xerox Star interfaces led the way for screen-based systems. A 1982 paper describes how The Star user interface differs from alternative office computer systems of the time with its emphasis on graphics and adherence to the metaphor of a physical office; of course it’s rigorous application of a small set of design principles. It is clear how one navigates and travels within the system.

Xerox Star Interface I
Xerox Star Interface I

Xerox Star Interface II
Xerox Star Interface II

Usability

Usability in a digital artefact correlates with good interaction design; usability design aims to improve the usability of a product and is regarded as user-centred design; this includes several essential elements – usability testing, based on the target users psychological research – user model and needs, the use of processes, etc. Cognitive Psychology, Ergonomics, Industry Psychology and various other disciplines are applied iteratively to distil the most suitable and practical design for the end-user. Designing a usable system requires intimate knowledge of human psychology in the context of digital interaction; check out our e-book bundle – Psychology Principles for WebUI Design.

Coming full circle, the following list by Jakob Nielsen’s(aka “the king of usability”) outlines ten general usability principles, more commonly known as Nielsen’s “heuristics” – use this as a pragmatic cheat sheet; if a product has a strong usability foundation the remaining design will emerge effortlessly.

Ten Usability Heuristics by Jakob Nielsen
Ten Usability Heuristics by Jakob Nielsen

Visibility of System Status

Users must be at all times informed about what is going on within the system, using appropriate feedback techniques within a reasonable time frame.

Match Between the System and the Real World

The system should speak colloquially, and the flavour of speech should not be system-oriented.

User Control and Freedom

Users do not always make the best choices and must have the facility to undo and redo; emergency exit and cleanup procedures must be easily accessible.

Consistency and Standards

Users should not have to second guess standards within the system; specific actions should do the same things throughout the platform – actions need to be consistent.

Error Prevention

Design the system in a way that it is difficult for the user to break (the user should not be able to harm), safeguards should be put in place to prevent system meltdown and misuse.

Recognition rather than Recall

Reduce the user’s memory and cognitive load by making objects, actions, and options visible. 

Flexibility and Efficiency of Use

Create multiple paths within the system wherein expert, and novice users can navigate in an accelerated or slow manner. CLI(Command-line Interface ) vs GUI (Graphical User Interface).

Aesthetic and Minimalist Design

Follow the principles of KISS(Keep It Simple Stupid ) and Occam’s razor. Everybody hates bloatware. One useful approach is applying the You Ain’t Gonna Need It principle, or YAGNI for short: leave out all the things that seem nice-to-have, but you have no proof you need.

Help Users Diagnose, Recognize and Recover from Errors

Error messages need to be in plain English (no error codes) and should be solution orientated, guiding the user to recovery. 

Help and Documentation

A system must be completely intuitive, requiring no manual or second-guessing, but there are always edge cases where complex tasks need further explanation, in a more granular manner. An instruction manual should be easily accessible—for example, Linux MAN pages.

Create and Share UX Designs With UXPin

When it comes to prototyping tools that support your UX processes and methodologies, look no further – UXPin does the job perfectly. It is full of design, prototyping, and collaboration features to let you and your team align and work in context. UXPin lets teams work on the same design – not only designers but also stakeholders who don’t have an account can collaborate. This takes so much frustration out of the review process and puts an end on the never-ending emails with feedback. All you have to do is send someone a preview link so that they can start reviewing the design.

Check out how UXPin stacks up against competition.

Start with a free UXPin trial to discover and try all the features yourself.

Design Team Structure: Ideal Setup for Small, Medium & Large Organizations

BlogHeader DesignTeamStructure 1200x600

Gone are the days when design was considered as a ‘nice to have’ in most organizations. Today, design is an integral part of successful companies with McKinsey reporting that companies that invest in design see a 32% increase in revenue and a 56% increase in shareholder returns.

Design teams that are structured properly are the heart and soul of great design that drives profits. This article will explain the different types of design team structures and the ideal structure for organizations of different sizes.

Increase efficiency of your design team and improve cross-team collaboration. Get access to UXPin’s technology that helps you bring fully interactive UI components to the design editor and build production-ready prototypes in minutes instead of hours. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

What is a design team?

team 01

A design team can be made up of one designer or a group of designers who play different roles, using different tools and methods to achieve one common goal. The common goal can be building a website, designing a mobile application, or any other design project.  

Types of design team structures

The structure of a design team refers to the hierarchy of different designers in the team and the different roles and responsibilities that they have. It is the organizational chart of the design team. There are four types of design team structures: centralized, embedded, flexible, and contractual. 

Centralized design team structure 

In this structure, the entire design team works together in a central location with one decision maker. Large design teams have several design managers who manage individual designers. These design managers then report to a single person mostly the Director of UX or the Vice President of UX. 

team 02

Centralized design teams work like agencies in the sense that they work on different design projects within the organization. The workload is managed by the design managers or the Director of UX.

The benefits of a centralized design team are:

  • Easy collaboration and sharing of feedback within the design team. 
  • A unified design experience because the design team shares the same vision and design resources. 
  • Reduced internal team conflict because of clearly defined roles within the design team. 
  • Wide range of learning opportunities for designers when they work on different design projects. 

This design team has several disadvantages which include:

  • Isolation of the design team.
  • A slower design process leading to time wastage.

Embedded design team structure 

Here, designers are embedded in several cross-functional teams within an organization and they report to the leader of the team. Designers get to work with developers, product engineers, and marketers on a specific product, feature, or line of business. 

team 03

They are also known as decentralized or distributed teams and they have the following advantages:

  • Improves cross-departmental trust and collaboration.
  • Increases the speed of product development. 
  • Provides designers with a chance to be experts on a specific type of project.

This team structure comes with some drawbacks which include:

  • Designers can be outnumbered in a team which might lead to their opinions being disregarded.
  • If there is no centralized design system, distributed teams can do a lot of repetitive work which wastes time and resources.
  • There might be little improvement in the design process if no one is in charge of improving it. 

Flexible design team structure 

In the flexible design team structure, designers are part of cross-functional teams and report to the team leader and they also report to a central design leader. This in-house design team structure is a hybrid of centralized and embedded design team structures. These design teams are flexible because they can be moved around easily to meet changing organizational design needs. 

team 04

In the flexible team structure, the daily activities of designers are directed and supervised by the team leader. Additionally, design team management is done by the design leader and there is collaboration with other designers in the form of design reviews. 

The benefits of the flexible design structure are:

  • Increased flexibility to meet any arising design needs.
  • More focus on the design process as a result of the double oversight.
  • Improved collaboration between design and other product teams.

The drawbacks include:

  • There can be confusion among designers on which leader has the final say in design decisions. 
  • The structure might be hard to implement in large organizations. 

Contractual design team structure 

An external design team can be hired on a contractual basis to fill design gaps. Small organizations that don’t have enough budget for a full-time designer can hire a design team on contract. Similarly, organizations with in house design teams can experience spikes in their design workload or gaps in the skill set of in house designers. In both cases, contractual design teams can help fill the shortfall in bandwidth and expertise.

Ideal design team set up for small, medium, and large organizations

The right design team structure for your organization will depend on many factors. These are: the size of your organization, the type of design projects, and the capacity of your design team in comparison to design demand. Nevertheless, there are some design team structures that are best suited for organizations of different sizes.

Ideal design team setup for small organizations

For small organizations, the decentralized model where a designer is attached to a cross-functional team is most suitable. This designer can be in house or contracted. The best type of designer to hire for small organizations is one who has design leadership skills. A design leader will be able to advocate for the importance of design to the executives and create a strong vision. This will create the foundation for building a strong design team as the organization grows and hires more designers. 

Ideal design team setup for medium organizations 

As an organization grows, more designers are hired. The centralized model is more suitable for medium-sized organizations because the design leader will be useful in creating a common design vision and in managing the day to day activities of the designers. A centralized design team structure will make it easy for designers to share knowledge and give each other feedback.

Ideal design team setup for large organizations

Once an organization has a high design maturity and a large number of designers, the flexible or hybrid team structure works best. The design leader will be responsible for ensuring that designers collaborate well and for creating common design resources such as design systems. 

On the other hand, the team leader will be responsible for ensuring that the design team collaborates well with other teams such as the product or engineering teams. This team structure gives large organizations the best of both worlds. 

Best practices for building a strong design team structure 

Hiring designers and putting them into teams is not enough, you need to ensure that your design team has enough resources and that it is properly managed. Here are a few strategies to help you get started:

Ensure that they have access to the best tools

Design tools can streamline the design process and save your company time and money. An all in one tool like UXPin makes it easy for your designers to design, prototype, and collaborate in one place. This tool will help your decentralized designers work well with developers because it bridges the gap between design and development. Your team can share feedback with contracted designers and other stakeholders easily.

Make growth and development a priority

In order to create an engaged design team, give them feedback that helps them improve their skills. Schedule regular one-to-one meetings with every designer on your team to give them feedback and to find out if they need additional support. 

Build a culture of design strategy

A culture of design strategy helps your design team to play a strong role in driving business goals. It makes it easy for other departments to see the value of design which improves the morale of your team. 

You can create a culture of design strategy by training your designers to be customer-focused and by aligning design goals with business goals. Design strategy should guide everything that your design team does. 

Increase your design team’s efficiency

Adding new team members doesn’t always equal better collaboration and being more productive. Sometimes you need to work on your process.

If you want to create efficient, well-designed process, here’s something for you. UXPin’s Merge technology makes it easy to bring interactive components to the prototyping process and build prototypes 10x faster. Check what it is all about. Discover UXPin Merge.

Modal UI Dialogs and Windows: When Should You Interrupt User Flow for Your Own Benefit?

BlogHeader Modals 1200x600

Most designers do everything possible to give users streamlined experiences without any interruptions. Sometimes, though, it makes sense to interrupt the user flow with a modal that triggers  the user to do something on a website or in an app.

The following article explains various  cases  in which it makes sense to use modal UI dialogs and windows. Knowing the right moments to interrupt the user experience can actually add to your product’s effectiveness. You need to take a savvy approach to make the most of modal design without annoying users, though.

Design modal UI in UXPin, one of the best, end-to-end design tools. Build advanced prototypes with features like expressions, conditions, and more. Explore it capabilities at trial. Try UXPin for free.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What Are Modal UI Dialogs and Windows?

Modal UI dialogs and windows are large boxes that cover entirely or partially  the main window until the user performs an action. They work like pop-up windows. Unlike most pop-up windows, though, users cannot continue by clicking an X and closing the box. Instead, they must take an action that tells the website or app how to behave.

As a designer, you probably don’t like the idea of interrupting a user’s experience. You want to create a seamless product that simplifies complex tasks. You might also have aesthetic reservations about UI modal designs. When a window interrupts the main window, it also interrupts your design.

When you think beyond the immediate experience of encountering a UI dialog, though, you can discover ways that the interruptions actually improve user experiences.

Modal designs can also help your product acquire the information that owners need to make money. Even if you despise the interruptions that modal UI dialogs cause, you must accept that designers can only work when they have clients willing to pay them. If that means adding a few interruptions, then you have to do it.

That’s also why we put together the following examples to show you that modal dialog has a place in cohesive, pleasant designs.

Use a Modal UI Collect Information and Generate Leads

Many apps  and websites  collect information from users so they can generate leads for clients. When someone visits an app like Instagram, they have limited access to content until they create an account.

If you try to scroll too far into the content, a modal dialog box will appear and  ask you to either log  in or create an account.

Creating an account gives you access to all of the public images on Instagram. You have to give Instagram your email address to create an account, though. It uses this information to stay in contact with you. Depending on how often you use the platform, you may get daily or weekly emails with updates about your account and friends.

Lead Generation for Ecommerce

Instagram doesn’t want to sell products or services to you. It just wants you to visit its platform so it can earn advertising revenue.

Ecommerce sites, however, use lead generation in a different way. Their modal dialogs ask you to enter your contact information to create an account. Companies can then use your information to let you know about products, services, and specials that might appeal to you.

user laptop computer

With this type of lead generation, companies hope to make money by getting you to buy something. With the modal UI, they would miss opportunities to generate the income needed to grow and serve their customers.

Helping ecommerce sites generate leads and improve buying experiences will always play some part in a product designer’s work. Learning how to meet your client’s needs will help ensure that you continue getting work.  

Ideally, you should also learn how to write microcopy that converts users. Choosing the right messages can make a significant difference in your dialog box’s effectiveness. 

Break Complex Actions Into Smaller Steps With Modal Dialogs

Product designers cannot assume that all users have a lot of experience using websites and apps. Even though 81% of Americans own smartphones, you can’t assume that all of them have used their devices for anything other than placing phone calls. You certainly can’t expect all of them to know how to complete complex actions online.

Modal windows can break complex actions into small, manageable tasks. Instead of confronting users with unrealistic expectations, modal dialogs can take small steps to reach a complex goal.

Let’s use Asana login as an example. It’s a user-initiated modal that doesn’t launch until the user asks it to. Asana must ask several questions to create your account, including:

  • Your name.
  • The type of work you do.
  • An introduction to setting up your first project.
  • Your billing information.

By spreading out these and other steps, new asana users get to create accurate profiles and learn the basics of setting up their first projects. If the website asked all of these questions and presented all of the instructions at once, users would feel assaulted by information. Asana’s approach makes it easy to focus on each step without feeling overwhelmed. 

Position Modal UI Pop-Ups in the Right Places

Pop-up windows need to appear in the correct place to grab the user’s attention and encourage action. Twitter offers a great example of modal UI screens that pop-up in just the right places.

Notice that the pop-up doesn’t fill the entire screen, so users still know which service they’re trying to use. Instead, it covers just enough of the area to demand action.

The position matters quite a bit, too. Pop-ups can work well in different places. Twitter gets it just right by positioning the modal UI in the center of the page. Each user gets confronted with an account request that asks straightforward information. The fields also give people plenty of room to answer questions completely.

On a mobile device, the pop-up appears on the upper-half of the screen. This ensures that the user sees the modal pop-up before scrolling down. If the pop-up appeared elsewhere, users might miss the interaction, which would leave them wondering how to create accounts.

Use Modal Design to Prevent Errors and Correct User Mistakes

When trying out new products, most people jump into the experience instead of looking for instructions. Designers should recognize the impulse as a part of human nature. 

Modal design gives you a whimsical, non-judgmental way of saying, “You didn’t do that right at all!”

The above UX automation tells the user that a download has failed. Maybe the user caused the failure. Maybe the failure came from somewhere else. What matters is that the animation makes the failure amusing. 

You can imagine similar modal dialogs that say something like, “Oops! You forgot to attach your file!” or “Could you check that address again?” 

Suddenly, the interruption doesn’t come across as judgmental. It acknowledges a mistake that happens all of the time and asks the user to try again.

Let Modal Windows Direct Users to the Right Features

Some websites and applications need users to complete specific actions before they start working. If the user doesn’t follow instructions, the feature becomes useless. At this point, frustration kicks in and the user navigates away to find a product with a more intuitive interface.

responsive screens

Imgur gives you an example of an application that makes it easy for users to understand what steps they need to take to reach a goal. When a user wants to upload an image to Imgur, they see a modal UI dialog with several straightforward options. Technically, the user can X out of the dialog box, but they will get sent back to the homepage.

Assuming that the user wants to upload an image, they can choose between:

  • Drop images here
  • Choose photo/video
  • Paste image or URL

It doesn’t get much simpler than that. 

Yes, the modal design has interrupted the user experience, but to perform an essential task. A window pops up that says, “I’m here to make this easy for you! What image do you want to add?”

Without the modal dialog, users would need to search for an icon or command to upload images. The interruption saves time and prevents frustration. That makes it a necessary part of Imgur’s success as a free image hosting service.

Add Critical Modal UI Dialogs With UXPin’s Design Tool

UI modal windows interrupt user experiences, but they do it for good reasons that make products more enjoyable. 

Unfortunately, it’s easy for designers to misread their target audiences. What one person finds amusing or helpful could offend someone else. UXPin gives you the right tools, such as interactions and animations to test your modal UI dialogs and windows to make sure they do their jobs well.

Use UXPin’s design tool to create an interactive prototype of your product. Your prototype can accept real information from users, so it feels completely lifelike. Test your modal UIs by sharing your designs to colleagues, friends, and stakeholders for feedback. Start your free UXPin trial today

The 6 UX Methods That Proved to Be Effective in Driving Results

Most designers want to create something beautiful, but beauty alone in the UI & UX world is not enough. If it doesn’t support the goals of your business or your clients – it just won’t last very long.. A product can only last when the client makes money from it. A UX that doesn’t drive results will ultimately fail and disappear.

In the following article, you will learn about UX methodologies that have helped other companies drive impressive results. You can always express your creative ideas by twisting the concepts a bit, but you will want to follow the core methods to get results that clients will notice.

Before you start learning in-depth methods, consider that users abandon 80-90% of apps after using them just once. You face a lot of competition, so you need to follow a UX design methodology that drives impressive results.

Study the UX of Top Market Competitors 

Start researching UX methodologies that already work within your product’s niche. You don’t need to reinvent the wheel, but you can improve on its design.

If you have a client that wants a pet-themed app, for example, you can start by exploring the top-ranked apps in that niche, such as::

After reviewing the above examples, your client will choose something they like from each. Having a shortlist of your client’s preferences, needs, and expectations, you can already start building the user experience.

search files 1

You decide that you can create a better UX design methodology by adding UI dialogs that will transform the user’s journey.

When you present your first wireframe to your colleagues, you show them that the user gets to make small decisions that lead to a superior result. Upon opening the app, the user chooses between “dog or cat.” 

The answer takes the user to the next step in the process. Users that choose “dog” are asked if they need services “when you’re away” or “when you’re at work.” 

The “away” answer takes them to a screen with icons for boarding, house sitting, and drop-in visits. The “work” answer takes them to a screen with icons for dog walking and doggie daycare.

Regardless of the answer, they have to select a size that best represents their dog.

Users who choose “cat” get taken to a new screen with icons for boarding, house sitting, and drop-in visits.

No matter how users answer, the final screens ask for their locations and when they need the services.

Their answers produce a list of results that show well-vetted service providers and their prices. The users can schedule with one of the providers, enter their payment information, and expect their pets to receive excellent care.

Notice that the new UX techniques don’t deviate much from Rover’s original. It just takes a complex form and simplifies the user’s journey by breaking the form into a series of simple questions. 

Run Lean UX Workshops with Clients and Stakeholders

Your clients, which may include your project manager, agency owner, or client, need to be included in the entire design process. This is part of the Lean UX framework which advises to include as many stakeholders as possible from the start.

Therefore, before you spend too much time developing a prototype, talk to your client about defining and tracing goals. Do they  want to see a quick financial return on their investment? Do they  want the product to direct new users to an existing service?

The answers to these questions will help you design a product that reaches the proper goals.

Understand the Consumer’s Journey Map

Put yourself in the user’s “shoes” and think about how you would experience the product. Taking this step will send you on a journey to create a better user experience

While you use your product, ask yourself:

  • Does this experience prioritize my needs?
  • Does the product keep me front and center, or does it meander in other directions?
  • What steps could you add or subtract to make your experience better?

Some people find it harder than others to step outside of their perspective and look at products objectively. If you know that this method won’t work well for you, recruit colleagues who don’t feel attached to the project. Hopefully, they can give you unbiased feedback that helps you understand and improve the consumer’s journey map.

Create CTAs and Microcopy That Motivate and Convert

Microcopy plays a major role in how users respond to your designs. Inserting a well-written call-to-action in your design can motivate and convert users. 

Your CTAs can drive results by using short statements that tell people how to respond. 

As people become more tech-savvy, though, designers and writers need to reconsider the types of messages they use. Many people don’t trust tech companies. Some surveys show that 61% of people in developed markets believe that tech companies too often want to trick them into something, which in turn evokes the sense of mistrust..

Microcopy can help alleviate some feelings of mistrust and fear. Consider what Facebook has done to put new users at ease.

Zrzut ekranu 2022 03 15 o 15.00.41

The sign-up form tells potential members that the service is “free and always will be.” Anyone worried that Facebook would  start charging members can take some solace in that statement. 

The sign-up form also provides links to additional information. Potential users can learn why Facebook wants to know their birthday. They can also read Facebook’s terms of service, data policy, and cookie use policy. 

Most people never read policies. Anyone who questions Facebook’s motivations, though, can sift through the legalese to learn more about how the company operates and what it plans to do with member data.

Use Usability Testing to Get Feedback

Once you have a basic design of your product, create a functional prototype, distribute the prototype among test users, and conduct interviews to learn more about what they liked and didn’t like.

Other designers and stakeholders may have prejudices that make it difficult for them to give you unbiased feedback. A random person without any stake in the product’s success, though, can give you an unfiltered opinion. 

Feedback may include everything from “I really like the way scrolling down the screen expands individual options and makes them easier to read” to “this is the dumbest thing I’ve ever seen!”

It goes without saying that you should take some criticism with an entire shaker of salt. Disregard off-the-wall comments. Pay attention to sincere responses that can shape the future of your product and business, though. You never know who will give you insight that leads to better results.

Perform Research to Find the Right UX Techniques for Products

success done pencil

Interviews can help you see your product’s UX design methodology from more perspectives, which can lead to significant improvements in your designs.

Few options outperform data-driven research, though. The Interaction Decision Foundation uses a process that includes:

  • Insight
  • Building
  • Measuring
  • Learning
  • Results

Measuring sits in the middle of this process because it bridges the differences between artistic insight and data-driven testing.

To see how people respond to your product, you can lead a whole product with data-driven testing as it lives and grows. Based on different UX methodologies, you can optimize the product as it is already live. For example, running a/b tests, and drawing conclusions from them will give you some solid data-driven results.

Then, Watch data evolve as your people use your product. If you see poor performance, you can recruit artificial intelligence to help you spot patterns in behavior. Make adjustments to the product to see how the changes influence user behavior. You may find that a few tweaks can generate considerably more conversions.

Create and Share UX Designs With UXPin

When it comes to prototyping tools that support your UX processes and methodologies, look no further – UXPin does the job perfectly. It is full of design, prototyping, and collaboration features to let you and your team align and work in context. UXPin lets teams work on the same design – not only designers but also stakeholders who don’t have an account can collaborate. This takes so much frustration out of the review process and puts an end on the never-ending emails with feedback. All you have to do is send someone a preview link so that they can start reviewing the design.

Start with a free UXPin trial to discover and try all the features yourself.

How to Organize Information Effectively According to Information Architecture

At its core, a website is a way of presenting information to users. When the information is organized effectively, it makes it easy for users to find what they are looking for and for the business to accomplish its goals. In this article, we’ll look at how you can use Information Architecture (IA) to create better designs.

Ready to test your design idea? Use UXPin to build an interactive prototype of your product. Features like states, conditions, or expressions will make your prototype as real as the end-product. Try UXPin for free.

What is Information Architecture?

Information Architecture, IA for short, is the process of organizing information in a way that makes it easy to find and understand. The goal of IA is to help users find information on your site so that they can complete tasks. When your site doesn’t have good IA, users might find it confusing and hard to use. 

In order to organize the information on your site effectively, you have to understand how the different pieces of information work together and how they fit into the big picture of your website. 

The main strategies for organizing information include creating systems for: 

  • Classification: Categorizing and structuring information 
  • Labeling: Representing information 
  • Navigation: Moving through information 
  • Search: Looking for information

For you to create the required IA systems, you have to understand that information architecture is affected by three factors: content, context, and users. 

  • Content: This is the amount of content that you have to organize, its type, how it is structured, and who owns it. 
  • Context: These are the business goals, culture, technology, and resources within which your site exists. 
  • Users: This is who the website is made for, the tasks that they need to accomplish, their information-seeking behaviors, and their level of experience. 

Types of Information Architecture Design Structures

There are different ways that you can organize the information on your website. The IA design pattern that you choose will depend on the three factors that we have discussed before: content, context, and users.  Here are five common web structures. 

Single Page Structure 

In this IA structure, all the information is presented on one page. The single-page structure is suitable for sites with a small amount of information and a single goal. These can be personal contact sites or a site that promotes one product. 

Flat structure 

All the pages have the same level of importance in this structure. Users can access every other page from one page. Typically, this structure is used for simple sites that have few pages such as ‘Home’, ‘About’, and ‘Contact us.’

Strict Hierarchy Structure 

This structure is made up of a home page, category/ subcategory pages, and then individual pages. The categories can be accessed from the homepage. Each category or subcategory has its own individual pages that are linked from it.  A good example is an e-commerce site where the ‘men’ category has individual pages such as ‘clothes’ and ‘shoes.’

Multi-dimensional hierarchy structure 

This structure is similar to the strict hierarchy structure with the only difference being that individual pages can be accessed from different category pages. This structure is suitable for sites that have a lot of similar information. 

Best Practices for IA design

Once, you’ve chosen a suitable IA structure there are several best practices that you need to follow as you organize the information on your site.

Keep the needs of the users first

One of the major pillars of IA is putting the needs of the users first. Consider the information-seeking behaviors of your users, their level of experience, and their cultural context. You should also map out the user journey of how your users might interact with your site. 

Additionally, your site might have more than one type of user so its important to create different personas for each user type. This will help you keep the needs of all the different types of users front and center as you structure your site. 

You can find out the needs of your users through user researching methods like interviews and usability testing. You can also use beta testers to find out if the intended users are able to navigate your site easily. 

Don’t make the mistake of assuming that users will have the same needs or preferences as you. It is only after truly understanding the needs of your users that you can figure out how to organize the information on your site to meet their needs. 

Understand the purpose of your site 

The purpose of your site is the main goal that it seeks to achieve. This goal might be educating users, informing them, or selling a product.

The information on your site should be organized in a way that moves users towards achieving the goal of the site. If the goal of your site is to sell a product, the IA should move readers towards making a purchase. Similarly, if the goal is to inform users, your site should direct users towards the next most useful piece of information. 

For example, an academic support website might guide students from basic writing tips to connecting with a paper writer online when they need additional help completing complex assignments.

Often, your site can have more than one goal or sub-goals, which is okay. The key to good IA is to ensure that all content that leads to a similar goal is grouped together. 

Be consistent 

Use a consistent IA structure by grouping similar content together. If you have 5 category pages, put them together and don’t leave one out. A consistent IA will make it easy for users to understand your site, find the information that they are looking for, and complete their tasks. 

Methods of organizing information to improve IA design

When choosing how to design the IA of your site, there are several methods that you can use. 

Card Sorting

Card sorting is a simple and inexpensive method of getting the input of users on how you should organize the information on your site. First, you write the content type or page name on an index card, and then the users’ sort and group the index cards. 

You can use the basic card sorting method where you place the cards at random and the users sort and group them or you can use the reverse card sorting method where you sort the cards into groups and then have the users rearrange them. Moreover, you can let the users name the groups or you can have them use pre-named groups. 

Wireframing and Prototyping 

Wireframes are useful for outlining how the design layout of your site will look. More than that, they also give a basic view of how the information will be organized once the site is complete.

The same is true for prototypes which are an early model of how your site will look and function. You can use UXPin to create wireframes and prototypes that look like the real thing which will help you test the IA of your site. 

Mindmapping 

This is a low-fi way of web organizing and illustrating the relationships and connections between the different types of content on your site. You can ask users who participated in the card sorting exercise to create mind maps of how they think the content should be grouped using pen and paper. You can also create mind maps yourself using software tools such as Lucid Chart or Miro. 

Organize The Information In Your Designs Effectively 

Information Architecture is the key to creating a site that is easy to use. Use UXPin’s advanced prototyping tool to create a site whose IA truly serves the needs of your users. Share the prototypes with your clients or users and collaborate with your fellow designers and execute developer’s handoff all in one place. Try it for free.

How To Use Conceptual Models for Better UX and UI Design

BlogHeader ConceptualModels 1200x600 1

When you’re designing for a friendly user experience and user interface, you start with a concept. You have an idea of how it should work in the real world. You just need to communicate it to the rest of the design team.

Welcome to the world of what we call Conceptual Models. In this article, we will explain what Conceptual Models are and how to use them. 

Design interactive prototypes in UXPin and make your concept palpable and easy to grasp. UXPin is an all-around prototyping tools that covers every part of UX process, from conceptualization till design handoff. Check it out. Try UXPin for free.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What Is a Conceptual Model?

A conceptual model is a representation of a system. It shows how people, places, and things interact. They show the real-world features and interactions of your design idea.

In other words, a conceptual model is an abstraction of a piece of the real world or a design you plan to bring into the real world.

Conceptual Models That You Already Know

Google Maps

Zrzut ekranu 2023 03 28 o 15.46.42

When you pull up Google maps on your mobile phone or another device, you will see a representation of the roads, bridges, intersections, restaurants, fueling stations, retail stores, and points of interest.

Let’s say you want to visit Carnegie Hall in New York City.

You enter “Carnegie Hall” into the search engine. It brings up a map of the area around 7th Avenue and West 57th Street in New York, New York, USA.

You’ll see that the 57th Street Subway Station is across the street from Carnegie Hall, so you can just take the train to get there..

You’ll also see that there are restaurants, diners, and hotels nearby in case you get hungry during your visit or want to stay overnight.

These facilities appear on the map as sketches of buildings with labeled markers showing their location. Cartographers at Google maps that show you the concept of the area of New York near Carnegie Hall. 

A Planetarium

Zrzut ekranu 2023 03 28 o 15.48.56

Take an orbital model of the solar system. It has spheres that represent the Sun and planets. They’re mounted on arms that hold the “planets” at a distance from the “Sun” that’s proportionate to the distances of the real-world planets.

Within a complex system of gears, wheels, cogs, and sprockets, the spheres revolve around the “sun” and rotate just as the real-world planets.

It’s not the solar system, but it shows you how the planets move.

A Flowchart

flowchart example

A flowchart represents processes. You have:

  • Ovals signify the beginning and end of the process.
  • Rectangles represent steps of the process.
  • Diamonds symbolize a decision.
  • The text describes the steps and actions.
  • Document icons that could mean “print invoice” or “review sales report.”
  • Input, output, merge, and other symbols.
  • Arrows show the direction of the process flow.

As you can see that conceptual modeling can take many forms.

And they’re not media dependent. That is, you can create them with a sophisticated design program or draw them on a piece of paper. 

Conceptual Model Entities

Conceptual modeling entities are the symbols of real-world objects in a system. Let’s take Google Maps again as an example.

You’ll see that it has lines to represent the streets. Two parallel lines represent West 57th Street to show that it’s a 2-way street.

7th Avenue is a single line because it’s a one-way street. It has arrows to show the direction of traffic flow in the real world.

We’ll talk more about entity interactions later.

In the case of the planetarium, we have spheres that represent the sun and planets. The entity that signifies the sun is at the center of the model. It’s usually a yellow-colored sphere that’s larger than the others.

Closest to the “sun,’ you have the entity (a small sphere) that depicts Mercury. The second-largest entity is farther out and symbolizes Jupiter. And so on with the other planets.

In a flowchart, entities appear as icons with text descriptions.

Entity Classes and Instances

Entity classes are the universals. Instances are particulars.

For example:

  • Class – Street
    • W 57th St
    • 7th Ave
    • Broadway
  • Class – Restaurant
    • Chai Thai Kitchen
    • Brooklyn Diner
    • P.J. Carney’s Pub
  • Class – Hotel
    • Park Central Hotel
    • The Wellington
    • Courtyard by Marriott New York

Conceptual Model Relationships

Conceptual model relationships depict an interaction between entities.

It’s like forming a sentence where you have a subject, a verb, and an object. The relationship is the verb. The entities are the subject and object.

For example:

  • Karen Smith (entity) checks in (relationship) at Park Central Hotel (entity).
  • The box office (entity) sells (relationship) tickets (entity).

Conceptual Model Constraints

Constraints govern entity relationships within a conceptual model. You may recall that there are entity classes and instances. One instance might interact with a whole class. A class may interact with other classes. Or an instance may interact with only one other instance. A class might not interact with any other classes. Some possible constraints are:

  • One and only one. This indicates that only one entity of this type is in the system. For example, an orchestra has one conductor.
  • Zero or one. You can think of this as a yes/no or an on/off constraint. For example, one customer attending a performance at Carnegie hall has a season pass. Another does not. The entity that we call “season pass” has a constraint value of 1 in its relationship with the first customer. With the second customer, the value is 0.
  • More than one. You express this as a minimum and maximum value. An orchestra might need a minimum of 4 violinists. A full-sized symphony orchestra has no more than 34. The constraint value for the entity labeled “Violinist” is 4 to 34 in relation to an entity named “Orchestra.”
  • One or more. Here you have to have at least 1. An entity named “Musicians” must have a value of at least 1 to have a relationship with the entity “Musical Performance.”
  • Zero or more. This says that it’s possible to have none of this kind of entity and that you can one or more. You might not sell any tickets to a performance. But if the performance hall has 3,671 seats, that’s the maximum value.

Suppose you’re creating a conceptual model for a database for Carnegie Hall. Some of the constraints might look like this:

  • People
    • Musicians
      • Conductors – 1 and only 1
      • Violinists – 4 to 34
      • Violas – 4 to 12
    • Customers
      • Season pass holders – 0 to 1,000
      • Robert Johnson – 1 and only 1
  • Performances
    • Event on 5 April 2021
      • Sold tickets – 0 to 3,671
      • Unsold tickets – 0 to 3,671

And relationship constraints might be:

  • Conductors (1 and only 1) to violinists (4 to 34).
  • Customers (0 to infinity) to seats (0 to 3,671).
  • Robert Johnson (1 and only 1) to season passes (0 or 1).

Putting It Together

You have an idea for a system, and you know what you want it to do in the real world. Now you need to communicate the idea to your teammates. So far, you’ve looked at the parts of a conceptual model.

  • Entities – the people, places, and things.
  • Relationships – how the entities interact with one another.
  • Constraints – the number of entities interacting.

You want to keep it simple. Start with the drawing tools inside UXPin. That way, you can quickly share your idea with the entire design team, clients, investors, and other stakeholders.

The great thing about UXPin is that you won’t need to export your design file to another program when you move from concept modeling to prototyping.

Use the box tool from the editor to add entities to your model. Add text inside of a box to label the entity. 

You can include the constraints inside the box or add text outside.

Use lines to show entity relationships. If the interaction only goes one direction, draw an arrow. Add text to describe the relationship.

Suppose you’re making a conceptual model for a system to sell tickets to an event at Carnegie Hall. It might look something like this.

You may have noticed that the entity “People” has no constraint value. It’s omitted to keep things simple. It could easily carry a value of “0 to infinity” or the current earth’s population. You don’t have to show every detail, as long as everyone concerned understands.

Tips For Success

  • Establish the goal. Who is the product for? What does it do for them?
  • Brainstorm. Create a simple model. Get input from team members. Add details as needed.
  • Evaluate. Do you understand the concept? Do team members understand the concept? Does the model communicate it clearly?
  • Iterate. You may need several versions before finding the best way to convey the idea.

Final Thoughts

When you kick off a UX/UI design project, conceptual modeling can be valuable to any design team.

  • Establishes entities. It defines the people, places, and things represented within the model.
  • Defines project scope. How big is it ? How much time will it take to build it?
  • A springboard for creating more concrete models.
  • Keeps everyone on the same page. Some team members might not work with code. But everyone needs to understand what’s going on.

For UX and UI designers, a conceptual model is a first step in communicating what you want the system to do for the user.

Keep your model simple. You don’t have to include every possible entity, relationship, or constraint value. Covering every detail can lead to a lot of time waste.

When you create your conceptual model in UXPin, your teammates and stakeholders have instant access. That lets them input their ideas and give feedback. And there’s no need to export to another design tool when you’re ready to move to the next stage of the project. Take your design to another level. Try UXPin for free.

User Interface Style Guides: The Checklist of 5 Things Your Guide Needs

Every product needs a consistent design that helps users make sense of their experience. Without consistency, users will feel lost. Frustration leads to abandoned carts. Your customers will choose an alternative that maintains a cohesive standard throughout its features – and you don’t want that. UI guidelines can help you maintain the consistency that appeals to users. 

Creating a checklist with all the necessary UI elements  will help ensure that your products appeal to consumers. Before you jump into creating the checklist, though, it’s important to understand the role that UI guidelines play in product development.

Key Parts of User Interface Style Guides

Now that you have a deeper understanding of what user interface style guides accomplish, you can start creating your own style guides that improve efficiency and contribute to your product’s success. 

Just one last thing before you start. Use the following UI style guide checklist to make sure you cover all of the items your design team may encounter. 

Colors

Every product needs a cohesive color scheme that separates features, communicates with users, and makes the UI attractive.

In most cases, you want to keep your color schemes as simple as possible. Some products, however, require more colors than usual. A video game with several characters will probably need more colors than an app designed to help people budget their money.

UXPin’s Design Systems feature can help you organise your color palette as well as text styles, colors, and icons.

You can also find inspiration from free tools like:

Text

Text descriptions in your UI style guide should cover features like font, font size, color, and the amount of space between letters, words, and lines. 

You may need to create unique text descriptions for different fields in your product. For example, your buttons might use a different font, font size, or color from the text used in your hero banners.

Iconography

Design teams spend a lot of time creating icons that they can use throughout products. A creative system of icons can add personality to your products

The way that you design icons can help establish your product’s tone. If it’s a whimsical app for finding rideshares, then you can use fun icons that make users smile. If it’s a serious app for filing taxes, then you can use basic icons that provide clear instructions without letting whimsy confuse users.

As long as your style guide contains the same icons, everyone on your team will know which ones they can use.

Patterns

Design patterns play an important role in helping users understand the different parts of your product. Your navigation bar, for instance, might use a pattern that differentiates it from the background, search bar, and forms.

By setting patterns in your user interface design guidelines, you ensure that every element of your product has the correct look. Even a subtle change can confuse users. Consistency is key!

Interactivity is one possible feature of your patterns. Take a moment to think about this aspect.

How do you expect users to interact with your product? Should they push, click, speak, or gesture? Your style guide needs to define the expected interaction so that users know what to expect on every page.

Similarly, you need to define how your design elements respond to interactions. Perhaps scrolling down causes icons to swell and dominate the screen. Or maybe clicking an icon initiates an animation that shows the action’s progress.

UI interactions and story mapping help to create an experience that matches your product’s purpose. You can place interactive design patterns into UXPin’s library for use by many or a select few users.

How UI Guidelines Benefit Both Users & Design Teams

Following a UI guideline benefits your users and team members. It improves the experience for users, who can approach your products with enthusiasm knowing they have the UI guidelines as an accessible resource. It also fosters independence and agency among design team members, giving them access to a variety of tools and approaches. 

Benefits for Users

  • Easier for users to understand the product.
  • Cohesive experiences that make people comfortable using the product.
  • Cross-product branding that helps users recognize other websites and applications made by your company.
  • Intuitive features that people can use without reading instructions.

Overall, adopting UI guidelines makes people feel more comfortable and confident while using your products. That contributes to their brand loyalty, which could lead to greater success for other products.

Benefits for Design Teams

  • Provide clear instructions instead of forcing designers to “reinvent the wheel.”
  • Give designers access to a library of approved assets and elements that they can add to products.
  • Reduce the amount of time that developers spend seeking guidance from project leaders.
  • Improve collaborative efforts without forcing everyone to work in the same space.

UI guidelines won’t eliminate all of the problems that teams encounter while developing new products, but they can streamline the development process, lower the stress that individuals experience, and improve the time to market.

User Interface Design Guidelines Are Distinct From Other Design Documentation

New designers often get confused by the differences between design systems, pattern libraries, and style guides.

You can remember the differences by thinking about each one as a step in your design hierarchy.

Pattern libraries establish design patterns used by everyone across the company. They usually include design systems. These systems describe everything from documentation to design standards used by designers and developers across the company.

Style guides describe specific aspects of a project’s design. It can include design scales, typography, UI patterns, icons, and other assets used throughout a specific product. The design system and pattern library may contribute to a user interface style guide, but designers should focus on meeting the style guide’s descriptions when working on products. 

Why You Make Style Guides at the Beginning of Projects

Creating a style guide can seem like a serious burden. Making a UI style guide could take anywhere from a few hours to a few weeks. However, it’s important to resist the temptation to skip this stage of product development. Over the course of the project irregularities will emerge. When your team doesn’t have access to a style guide, members will make subtle differences that make the product look amateurish and incomplete.Save time and energy by taking the time you need to build a comprehensive UI style guide at the outset of a new project.

Find Inspiration in These Three Outstanding UI Style Guides

On some days, your creative energy makes it easy to create spectacular UI style guides that will blow away users. When you don’t feel inspired, though, making a style guide can feel impossible. On those days, draw inspiration from these three examples of outstanding UI guidelines.

Microsoft

Microsoft has built a comprehensive Windows UI library called WinUI that can add consistency, accessibility, and intuitiveness to websites and applications. The WinUI platform emphasizes modern UI features that put a priority on control, performance, and choice. The platform also makes it easy for you to continue updating your products as Windows and similar platforms evolve.

Code Academy

When Code Academy updated its UI style guide, it made several of its guidelines public. The rejuvenated website uses:

  • More contrast between elements to keep the color scheme as simple as possible.
  • Fewer form fields to improve conversion rates and reduce typing fatigue.
  • Easily identifiable icons that help users navigate the app intuitively.

Google Material Design

Google developed Material to help developers create websites and applications for smartphones and websites.This is a design system, but provides an excellent gateway to a model UI style guide.

Material feels a bit daunting at first. You expect to see terms like “typography” and “navigation.” “Machine learning,” however, looks intimidating to people without technical backgrounds. The average designer doesn’t know a lot about machine learning. Google provides instructions for using machine learning and other sophisticated tools, but you will need to spend time studying them.

More often than not, you will get the results you need by playing with Material’s design guidelines, components, icons, and other common features. If you ever want to enter the world of coding, you can find plenty of tutorials on Material’s website. Most designers will feel more comfortable using a tool like UXPin, which can simulate interactions and generate prototypes without coding experience.

Make a User Interface Style Guide With UXPin

UXPin’s design tool makes it easy for you to create design systems and style guides for your projects. Your style guide and design libraries can be shared with your team, so all of your designers and shareholders will have access to the same assets.
Want to see how UXPin’s design tool can help you create a design system and collaborate with your team? Start your free trial account to explore all of UXPin’s features. Once you have a design that you like, UXPin will help you turn it into a fully functional prototype. Get the results you deserve by adopting a tool that includes design, collaboration, and prototyping features!

Search Bar Design Guide: How to Get Your Users Where They Need to Go

BlogHeader SearchBar 1200x600

The search bar is an easily overlooked part of a site during the design process yet users depend on it to find specific information. Since the search bar is one of the most used elements on a website, search bar design has a significant impact on user experience. This article will give you the complete guide on how to design search bars that help users find the information that they are searching for. 

Should you have a search bar on your site? 

The thinking and psychology behind search bar use is that it helps users find information quickly. Search bars are useful in complex content-heavy sites that have more than 100 pages. In the Business to Consumer (B2C) sector, search bars are used in large e-commerce sites, news sites, deals sites, and booking sites to help users find information easily. They are also used in large Business to Business (B2B) sites that have many customer segments and product lines. If you have a small site that has few pages, a search bar might not be required but you will need it as the site grows. 

A search bar is usually  made up of two UI elements: an input field, and a button.  However, the design of a search bar has a significant effect on how fast users can find the information that they are looking for on your site. 

Display your search bar prominently

Make your website search bar easily discoverable by displaying it prominently on your site. The discoverability of your search box is even more important on ecommerce sites or booking sites where users rely on search to navigate the website. 

A prominently displayed search box (Source)

Avoid hiding your search box in a drop-down menu or behind the search icon (progressive disclosure) because it makes it hard for users to find it. Additionally, when you hide your search bar, you add an extra action that users have to take before searching your site. 

A search bar hidden behind an icon (Source)

Include a magnifying glass icon in your search bars 

Icons act as mental shortcuts and visual cues for an action or an object. For the search action, the magnifying glass is the universally accepted symbol, and using it will make it easy for users to recognize your search bar even when there is no text label. When choosing a magnifying icon, choose a schematic icon that is not overly stylized to increase the speed of recognition. 

The magnifying glass icon (Source)

Use a lot of contrast and padding to make sure that the icon stands out and make it large enough. 

Depending on the type of site you are designing, you can choose to have  a search button next to your search bar instead of a magnifying glass icon. The button shows users that they need to submit a search query before they can get their search results. LiquidPlanner’s search bar has a prominent search button that is well labeled. 

A search bar with a search button (Source)

When creating a search button for your search bar, follow the conventions of good button design by ensuring that it is of the right size and it has enough contrast so that it stands out. Ensure that users can use the ‘Enter’ function on their keyboards to submit their search queries. Some users still use the enter function to submit queries and it’s also good for accessibility

Use placeholder text to guide users on what they can search for 

Use a sample search query as placeholder text to guide users on the search queries that they can make on your site. This is useful for website search bars where users can search for different items. Limit the length of your placeholder text to reduce cognitive load and ensure that there is enough contrast for it to be legible. 

Placeholder text guiding users on what they can search (Source)

Create a  search box looks like a search box and that it is easy to use. Start with a simple search and give users the option to use search filters or advanced search mechanisms if they need to. A good example is IMDb, which allows users to choose the type of search that they want to use.  If you make advanced searches as the default, streamline the search box design so that it’s easy to use. 

A simple search bar with advanced search options (Source)

Place your search bar where users expect to find it 

Website users scan websites using an F pattern and it is important to place your search bar within this F pattern so that users can see it. This is at the top center or top right of your website. Additionally, users actually expect to find search bars for websites at the top of the page. Don’t bury your search bar in the footer, where users have to hunt for it. Use heatmaps to find out the areas of your website where users scroll and click the most (hotspots) and place your search bar there. 

Use auto-suggest 

Auto-suggest guides users when they are typing out their search queries to avoid errors in search query formulation. Make sure that your auto-suggestions are helpful to avoid confusing or distracting users. Show the difference between the information put in by the user and auto-suggestions by bolding the auto-suggestions. Make your auto-suggestions keyboard navigable to and don’t give too many auto suggestions as this can cause confusion. 

Auto-suggestions (Source)

Put your search bar on every page 

In your search bars design,make it possible for your users to always access the search box. The search bar is especially useful in the 404 and other error pages where users hit a dead end. 

Use a large field size

If the input field of the search bar for your website is small, users have to scroll back and forth to see what they have typed which leads to poor usability. Make it easy for users to view and edit their search queries by using large input fields that reduce query errors. Google uses a large query input field to accommodate its common search queries. 

Large input field (Source)

Size your input fields according to the size of queries that you expect and set your widths with em. Use a growing search box that expands with the users’ search query if you want to save space. 

Design search bars with the best UI tool 

In order to design search bars that answer your users’ questions, you need the best UI tools. UXPin provides you with an all in one platform where you can design and prototype your search bar as you collaborate with your team members and developers. Sign up for a free trial of UXPin (no credit card required) and start designing your search bar today. 

Turn your Search Bar into a UI Component

Tired of designing the same search bar over and over again? You can ask your developers to turn your search bar into UI component. If you don’t have engineers on your team, you can also use a search bar from a public UI component library, such as Ant Design, etc. You can bring this component to UXPin thanks to its powerful Merge technology and use it in your next prototype.

We’ve just released Merge Component Manager, a handy tool that makes it easy for designers to import and manage UI components in UXPin. Try it out on trial. Just request our salespeople to enable it for your trial account.

How a Human Centered Design Process Infinitely Enhances Your UX and UI

The best design is focused on people. Always. 

In the world of Web and app design, we often use words like audience, clicks, likes, visitors, and users. Those words remove us a step from the fact that we are designing for people. Behind every click is a human being looking for something — a product, an answer to a question, or entertainment.  

The concept of human-centered design isn’t new. The overlap between human-centered design and User experience/UI design is large, though there are some subtle differences. In this blog post, we’ll explore the basics of human-centered design and how it overlaps with UI/UX, provide examples, and outline the process to create a human-centered design.

Here at UXPin, we think all great designs are human-centered.

Human-Centered Design Versus UX Design: Is There a Difference?

In many cases, there aren’t any meaningful differences between UX/UI design and human-centric design. However, there a few do exist.  

Firstly, human-centric design is broader than UX/UI design. The concept covers ALL design — physical and digital.. We  give designers the tools to create great user experiences online. In our context, UX Design is focused on the techniques and strategies for creating  people-focused design for apps and websites. Think of human-centered design as a mindset and philosophy and UX/UI design as a professional role. 

The other difference is a subtle, but important one. Here’s a  great explanation of human-centered design from IDEO.org, the design firm behind Apple’s first mouse:

“It’s a process that starts with the people you’re designing for and ends with new solutions that are tailor made to suit their needs. Human-centered design is all about building a deep empathy with the people you’re designing for; generating tons of ideas; building a bunch of prototypes; sharing what you’ve made with the people you’re designing for; and eventually putting your innovative new solution out in the world.”

When you scan the think pieces about human-centered design, the word “empathy” appears everywhere. The designers must have empathy for — and a deep understanding of — the people who will use the product. 

User experience/User interface design is focused on ensuring that website visitors or app users can access features intuitively. Actions are streamlined to remove sticking points from the user’s journey. Obviously, having an empathic connection with and deep understanding of the people who will use the website will improve design, but it’s not always a core element in the UX/UI design literature. 

Here’s the definition of UX Design from whatis.com: 

User experience (UX) is the art of planning a product’s design so that interactions with the completed product will be as positive as possible. 

This includes an end user’s interaction with and attitude toward a given IT system or services, including the interface, graphics and design. IT leaders concerned with UX ask questions to determine what their users need and value, and compare those findings to their IT system’s current abilities and their limitations.

User experience design (UXD or UED) addresses all aspects of how a product or service is perceived by users. Elements of user experience design include:

As you can see, there’s not a huge difference, but the focus on empathy is crucial — and can be the difference in creating just another website versus creating a website people love to use.

To sum up, the focus of human-based design is obvious, but we’re going to say it anyway. You are designing for people, in our case, for online apps and websites. You must have a deep empathy for and understanding of your audience and place them at the center of your UX design and NOT add design complexity to show off your dazzling design abilities — no one cares unless it makes their life easier. However, when you combine your dazzling design abilities with empathy for the people who will use your design; the result is dynamite. 

Human-Centered Design Examples

Before showing Web examples, I’d like to show one of the best examples of human-centered design – The Norman Door. 

When the human brain sees a handle on a door, we are triggered to pull. I’m sure all of us have at least once pulled on a door that says “push”. The solution proposed by Don Norman, who is a UX researcher, is fairly obvious in retrospect. 

The focus on functionality and usability here is based on understanding how the human brain works and responds to prompts and our environment. Another common example is children’s toothbrushes. If you have children, you know  how “fun” it is to get them to brush their teeth. Children’s toothbrushes are shorter; have large, easy-to-grip handles for smaller, less coordinated hands; and comic characters are often designed to encourage brushing. 

TV remotes are another example, with the most frequently used functions (volume, channels) more prominent for ease-of-use and ergonomically placed where either the thumb or index finger fall (depending on the design of the remote). examples we’ve all experienced are the evolution of the TV remote to having the most used buttons — volume and channels — moved to the top of the remote. Last but not least,, inverted condiments — no one misses smacking the bottom of the ketchup bottle to get the last bit out. 

In Web design, Trello is a good example of a tool that removes clutter to focus on project management and collaboration. Trello removes clutter and allows individuals and teams to keep track of projects. Here’s the project management template Trello uses.

The simple structure is easy to navigate, update, and keep an eye on progress. 

The Google search page is a masterpiece of simplicity. There’s a daily image. The search box (which suggests topics as you type, helping people find what they’re looking for). At the top right, those with Google accounts can easily sign in. 

Venmo is another triumph of human-centered design. Think about how painful it can be to pay someone back — get cash and give it directly to them, write them a check and mail it or hand it to them (which they then have to deposit); Paypal can be clunky; and unlike Europe, bank to bank exchange is difficult in the US; 

Venmo is a simple, easy to use app that even strangers can use to pay each other — for freelance work, for your fantasy football league dues, anything. 

Human Centered Design Thinking

Always include humans in the design process. In too many projects, no one talks to the people for whom the project is intended. This seems so obvious that it shouldn’t need to be said, but you have a greater chance of designing a website or app that people love when you include the people you want to love it in the design process. 

There is a wealth of resources about human centered design. This is a very short list to provide a broader perspective for you. 

Without vetting them, we didn’t want to list them, but it’s worth mentioning there are a range of online courses on human-centered design.

Human Centered Design Methodology and Process

The methodology of human-centered design aligns with the UX/UI design process. Different proponents of the methodology have slightly different processes, some have three steps. Others suggest five or more. Here are five steps for a human-centered design process. 

  1. Empathy/Know your humans (end users).

You should have personas developed by speaking with the people who should use your design. Feedback from social media, beta testers, interviews, etc. are crucial to understanding what your people actually need, not just say they need. 

Every UX and UI designer can benefit from understanding the human-centered design process. As we’ve discussed, the differences aren’t huge. The biggest switch is a mental one. Stop thinking of users, clicks, and views and always keep the idea that you are designing for people at the forefront. 

That will keep you focused on what matters — delivering a user experience that will keep the people you serve coming back for more.  

You need to have empathy and a deep understanding of the needs and frustrations of the people you’re designing a solution for. 

  1. Define the Problem.

Define the problem by asking “why?” What problem are you solving for? The goal is to get to the fundamental problem or issue, not focus on the symptoms. Keep digging until you understand the action that needs to be accomplished.

  1. Generate Ideas

Time to brainstorm. At this point, don’t limit yourself. Gather as a team, even with the end users you’re designing for when it makes sense, and write down ideas on a whiteboard, Post-It Notes, whatever. Come up with as many ideas as possible. 

  1. Prototype

For UX/UI design for apps and websites, it’s time to start wireframing (UXPin is a fantastic choice for wireframing, click here to try it for free).  Get to a minimally viable design and begin testing. The goal isn’t perfection at this stage, but to create a design to beging gathering feedback.

  1. Test and Iterate

This part of the process is a core piece in any design protest. Test, see what works and what doesn’t. Gather feedback from the people you’re designing for. Don’t be defensive. Remember that while something may make sense to you as the designer, it may not for the people you’re designing for. And you’re creating something for THEM, not yourself. Keep the first element of this process in mind — empathize. Uncover why something works or doesn’t work for them, then make it better. Then, of course, do it again.  

The best part of incorporating human centered design methodology into your UX design process? Everyone wins. Your intended audience is more likely to love the website or app you design for them. In turn, these websites and apps are more likely to be successful — and profitable. 

Using UXPin as they Lynchpin of Human-Centered Design

The UXPin platform is ideal for bringing a human-centered design for a website or app from conception to life. With the ability to gather feedback from anyone at any stage in the UX design process, UXPin provides designers with the tools they need to create a great design and the suggestions and ideas of the humans they are designing for. 

Consider Website User Flow: a Guide to Understanding Your Site User’s Journey

Understanding your site user’s journey is foundational to designing a better user flow on your website. When users are ready to learn more or take action, is the path clear? Or is their journey disrupted by a broken or disconnected experience?  When this happens, users get frustrated, bored, or decide to search for an alternative. Mapping the site user’s journey to the user flow means more than just making sure that buttons work, are easy to identify, and have a clear call to action, although it means that, too.  It means understanding the objectives and pain points of visitors so that each touchpoint gives them the feeling of progress and motion along a journey and a sense that their action is being properly rewarded. 

When they click on a button or link are their expectations met? Does the content answer their question? Does it unfold effortlessly, or does the user have to work hard or face too many choices or unclear alternatives?  When they are ready to act, can they immediately do so?  Too many options and no clear flow can confuse and overwhelm the user, while too prescribed a path can feel controlling. The correct balance is a flow with options and a few paths forward, giving users both control and direction. Before designing your own unique user flow diagram, take the time to map out the objectives of both your company and your customers. Where those circles overlap will be the basis of your flow. 

Structuring Your Website for Effortless Flow

In evaluating how your overall website design will drive conversions, assign priority numbers to the user tasks that your site will help them achieve. Those numbers will form the basis of your user test protocols once the prototype is ready. When the user can navigate through desired content intuitively, follow relevant links, and reach conversion forms with minimal friction, the rest is fine-tuning. This all comes from matching your site to your user expectations through excellent design.

The 5 Critical Elements of Flow Design

The elements of your website design can either propel the user toward conversion points or interrupt the flow, generating hesitations and bounces. The elements that must work together at a structural level are the content flow, internal links, buttons, navigation, and internal search options.

1.The Scannability Factor in Content Flow

WebsiteUserFlow 750px 5

Your content design begins influencing the user before they even read the words or recognize the images. Users scan the page and begin forming their judgments by layout alone. The ideal content delivers a message at the page level, no matter what else changes with the pieces of content themselves. 

For example, big chunks of text will require commitment and concentration. That has value, but only for specific users under limited conditions. Model the most likely set of emotional conditions that bring users to your site. You can see this principle in action with Atlassian’s content strategy. The design team starts with “empathy for the end-user and their emotions in using the products.”

Above all, clear copy, clean visuals, and clear articulation of the value being delivered helps the user make a decision rather than puzzle over what it means and how it helps them. 

2. Intuitive and Relevant Internal Links

WebsiteUserFlow 750px 1 1

Once your content design is in sync, the next step is weaving it all together with links. Great internal links accomplish three things at once: 

  • They streamline user flow across the entire site
  • They clue in the user to the hierarchy and architecture 
  • They boost authority and SEO rank for all linked pages

Contextual internal links connect relevant content pieces to keep the user engaged while they pass on link equity from your pages with the best authority. Collecting data on how users click through the prototype can help the team understand how intuitive it feels to your users, and if the touchpoints address their pain point or aspiration. The links should guide the user along the journey, progressing them along a well-designed path of exploration and discovery and rewarding them for their effort. 

3. Buttons That Convert

WebsiteUserFlow 750px 2

A button is a doorway. By clicking, the user expects to enter another world within your site where treasures lie. Good user flow means buttons that are easy to recognize, contain action words that define the function completely, and offer visual clues to what is happening behind the scenes after the user presses the button. Color, shape, and language all  play a role in determining  whether  the user will progress along their journey., but users also expect familiarity and reliability above all., as well as consistency across the site. 

Analytics will bring you facts like where users bounced and dwell time, but it can’t answer the really important questions, like why they bounced or whether the dwell time represents hesitation. Button A/B testing can answer some of the biggest questions because the button is the number one unit of user interaction on most sites. 

Before a user can get to a form where they enter their information, they will have to click on a button or navigation link to get there. Your content guides users to the doorway but the button is what ushers them through. Devote development time during the structural phase to best practices in button design, including the psychology of what makes a button appear more inviting.     

4. Navigation That Impels Action

WebsiteUserFlow 750px 4

When mobile overtook the desktop as the primary way that users access the web, some of the biggest changes for design professionals came in the science of navigation. The loss of on-screen real estate and the replacement of a mouse with a finger changed everything in terms of what was important for the user as well as how to display those links attractively. The three-lined hamburger button with its slideout menu remains the default for many apps, but it’s not necessarily your best option. Even when it is, there’s an art to choosing just the right amount of links on that slideout. 

Navigation really deserves to be a project all its own due to all the possible combinations and the implications of each. Take a look at 16 navigation trends we’ve deconstructed for their value to various UX schemas. 

5. Keeping the User Engaged with Internal Search

As search gets smarter and loading times accelerate, user tolerance for wait times has evaporated. Up to half of your users will go straight to search when they visit your site and all will bounce if they can’t find what they want fast enough. Microcopy, such as placeholder text in the search bar, has proven effective in coaching users on how to search the site. 

Review your search log database for the best examples of how users found what they wanted. Add autosuggestions to complete the search and push related search items into the results to improve flow. Eventually, some users will come up with 0 results. When that happens, suggest links that will dial the flow back up before the user gives up. 

The Art of Shaping the User’s Journey

Great design and user flow are all about making the journey as fulfilling as the destination while eliminating friction and driving the action forward to a final destination. Ultimately, the user flow is a simulation of an internal cognitive experience that drives the user along not just a series of links and semantically-related content, but a narrative imbued with emotional resonance and the power of storytelling. 

To help get there, UXPIN User Flow UI kit provides all the elements and tools to shape and drive the user journey, built directly into our powerful and agile design tool. With flowcharts and prototypes in one place, the kit includes fully editable visual elements that allow teams to easily build clean, functional flows for their prototypes. Working between a holistic vision of the user journey together with the functionality to drill down into the details and make granular adjustments, this kit can help both designers and non-technical team members collaborate more effectively and optimize the customer journey. Working within UXPIN’s prototyping tool, work teams can:

  • Easily share flows with stakeholders and gather feedback from the team;
  • Collaborate, share and comment on designs and user flow elements; 
  • Test and track user behavior, gaining a more nuanced view of the customer journey.  

Ready to start building user flows and mapping the journey easily in an intuitive tool designed by designers for fast-moving prototyping and design in a changing world? Start creating flowcharts and diagrams today with a free trial of UXPIN’s prototyping tool.