ŷ������

Photo Credit: , ��

Nowadays to sell goods and services, you don’t need a traditional brick-and-mortar storefront. All you need to set up shop is a good internet connection, a domain and a site. However, that doesn’t guarantee success. There’s more to an e-commerce site than throwing up a few items and a credit card form. You’ve got to have a solid user interface and user experience to get your customers to open their wallets.

If you want to look at the UI and UX of an e-commerce site, then .

In this article, let’s take a quick look at the practical takeaways from the UI and UX of the popular e-commerce site.

When you choose an item on Amazon, you’re presented with an interface delivering incredible aggregated information. In addition to the Amazon price, you also see options for other vendors carrying new and used items. What was once built to become an online department store has instead become a network of sellers that offer the user many positive options for their shopping experience.

The amount of choices available in the interface, along with the aforementioned aggregation of links and the algorithm that customizes each registered user’s needs makes Amazon one of the most complicated websites you’ll see on the internet today. And yet the front-end experience is surprisingly simple because of the nested interface.

Just take a look below, which represents a solid grasp of Hick’s Law (e.g. limiting amount of user choices, as described in ):

��

Photo Credit:

The amount of choices available in the interface, along with the aforementioned aggregation of links and the algorithm that customizes each registered user’s needs makes Amazon one of the most complicated websites you’ll see on the internet today. And yet the front-end experience is surprisingly simple because of the nested interface.

��

Photo Credit:

As a consumer, users appreciate the buying and paying options Amazon displays prominently on each product page.

If you’re building an e-commerce site chances are you’re not building the next Amazon, but there are great examples of what a smaller, less involved site should have.

The more complicated the site and the greater availability of choices, the simpler the UI must be. Instead of jamming in top-level navigation items, .


Build trust and loyalty in the experience through smart UI decisions. In the context of e-commerce, reviews are the natural choice. On a broader level, you can build trust by displaying logos of top brands you work with, featuring testimonials (either with photos of customers or through video), and following the .


Give buyers a chance to change their purchase at different stages of the checkout process. On a higher level, build to reduce the likelihood of frustrating experiences. As described in , create humane feedback by notifying users of potential consequences of their actions. Then, as remedial measures, explain through clear feedback messages how to fix errors and create for user input.


Big images sell the product! While Amazon takes more of a utilitarian approach by featuring a you can certainly take a more elegant approach with if you’re a smaller e-commerce store (or even if you aren’t in e-commerce at all).

For more practical UI design tips based on an in-depth analysis of 33 companies, check out our free e-book, ��

��

When the desire to be trendy overpowers the need to fulfill user goals, your design is in serious trouble.

Let’s dissect single page vs. multi-page web UI design so you can make the best design decision.��

Web design trends like single page sites are not a bad thing. The trend is fueled by a very justified quest for simplicity and speed. Simple are also great for responsive design, serving all devices equally. Of course, sometimes a site absolutely needs more pages: for example, fast food sites like includes many pages for quick menu browsing.

��

Photo credit:

Adding extraneous materials or ignoring necessary content is an easy hole to fall into, especially with all the stakeholder feedback flying around.

So is it harder to design a compelling UI and UX for single-page sites, or more complex sites? Both �� or neither?

A Few Quick Considerations

Large websites are certainly challenging due to the complexities of multiple sections, submenus and ever-changing content. Of course, single-page sites can be just as difficult since you must boil down all the content of a larger site without confusing the user.

Photo credit:

When designing the user experience, consider these basic requirements that apply to any website:

How much are you offering to users? (information, product(s), and/or entertainment)


What are the most important elements in the hierarchy of the site?


How are you going to make this as easy as possible on the user?


How are you going to make this enjoyable/informative for the user?

Single-Page Websites

Single-page sites help keep the user in one, comfortable web space.

As with any website, if all of the content fits on one page, then why add more? Sometimes even the minimal amount of content needs to be spread among several pages. A great UX and UI designer will know the right size for a website. Here’s the pros and cons you will find with single-page websites.

Advantages

The immediate benefits of a single-page website is the content is presented in simple, easy and workable fashion for the user.

Single page sites immerse the user in a simple linear experience. There’s a clear beginning, middle, and end. In fact, the scrolling nature of single-page sites makes them well suited for mobile users who are accustomed to the gesture.

Photo credit:

Some experts argue that single page websites even have higher conversion rates as compared to larger, multi-page websites. did a study of single-page conversions and found that a single long landing page leads to 37.5 percent more signups, compared to a multiple page version.

One-page navigation, of course, is more straightforward than a larger site for sites which serve a single purpose. That purpose might be selling one product or offering one service, for instance. If your goal is to tell a story, then single-page sites are also a natural choice for visual narratives.

Photo credit:

The benefit of a single-page website is simple �� scrolling is easier and more continuous than clicking endless links. If a user begins to scroll, then you may find them more likely to keep scrolling than to stop and click a link.

Disadvantages

The biggest danger is falling into the trap of stuffing ��10 pounds of stuff into a 5 pound bag.�� Single page websites just can’t hold life, the universe and everything. As described in the free e-book , they require careful visual hierarchy and plenty of discipline. ��

As your categories of content increases (e.g. blogs, news, services, products), the more a single page site becomes less feasible. From a more technical standpoint, single-page sites are also less search optimized than multi-page sites. With tons of content and images on one page, they can also load slower.

Photo credit:

Search engine algorithms, of course, seek relevancy �� they match queries with content. While a single page site may improve relevancy for your primary keywords, it’s more likely it will dilute relevancy for sub-topics and terms that might rank better, or at all, on their own pages.

Defining content sections and using anchor links is the suggested method for increasing single-page SEO. Using H1 tags is also highly advised. As an H1 signals that what follows is distinct and separate from the rest of the page, it’s a good way assure SEO of a single-page site. (Use only one H1 per section of your single-page site).

Multiple-Page Websites

A multiple-page website is usually owned by a large company with a broad range of products or services. Their user base is probably quite diverse as well.

Key points about these websites are:

They are extremely large because they need to be.


Due to the amount of content, they are many levels deep with intricate UI.


Many times they are made up of many micro-websites and subsections to break up information and content as well as serve multiple entry points.


They provide better control over SEO with multiple pages and changing content.

Advantages

Multi-page sites makes a lot of sense for users who need traditional navigation to get around. They work very well for giving users a visual map of where to go.

For instance, for e-commerce sites, users don’t want to spend a page learning about your company’s story or staff. They want to find the right product, pay you, and move on with their lives. In that case, a nested navigation leading to different pages can be quite effective.

Multi-page sites also give you a better chance to rank for different keywords, since you can optimize for one keyword per page.

Photo credit:

In fact, the hybrid single-page site (like above) emerged to give designers the best of both worlds. The single-page structure optimizes conversions. On the other hand, the top navigation gives users more control than a pure scrolling experience. And as designer , you can even use modals and AJAX techniques to support multiple pages of content.

Disadvantages

The deeper the website goes, the more a traditional navigation will struggle.

Photo credit:

Some people believe that navigation can comfortably accommodate the first three levels but beyond that, expect one of two possible outcomes:

Either the navigation has to expand, eventually taking up more screen real estate


Higher pages in the information architecture will no longer appear in the navigation. In the latter case, if the user is deep within the website, they will lose the context of where they are because they are not seeing where the current page fits in the website’s structure.

As the site expands, we need to consider the experiences produced by all the different entry points.

If there are multiple-entry points for the website, the user must be able to easily navigate back to the home page or other pages of interest.

Final Thoughts & Advice

To sum it all up:

Take a . Figure out what content users care about, then design your interface accordingly. Include only as many pages as you need to.


Make sure your site is appropriate for a pure single-page experience. If you can just barely fit everything into a single page, consider the hybrid site instead. If you know you need multiple categories, use a multi-page site.


Don’t lose sight of SEO. Search engines optimization can be built up with single-page website. Adding fresh content is just one way to increase SEO.


Users don’t always read. This is why infographics and videos are part of the new user experience. Quick scanning for UI is a necessity for any sized site.


Keep it simple. A consistent design is actually simpler for users because it re-uses components, page-to-page. The behaviors, colors, and aesthetic will ease the navigation anxiety users will experience.


Clarity is important. Although people will more willingly scroll then click layers of links, first sight of the homepage will carry a big impression for user experience and the quick decision if the UI is worth the effort.

To learn more about the art and science behind good UI decisions, check out the free e-book . 30+ visual case studies are included from some of today’s hottest companies like Intercom, Medium, Facebook, and Twitter.��

Photo Credit: ,

Fast-food websites are an interesting mix of user experiences. They aren’t hard to land upon since fast-food joints register every domain name imaginable that relates to their name and menu items. This assures you’ll be enticed �� brainwashed to run right out for a meal. A perfect mix of UI and UX, images are bold and navigation is obvious to the user.

In this piece, we’ll discuss how you can look at fast-food sites to supersize your UX and UI.

Build Trust With Consistency and Familiarity

has been serving up hamburgers longer than they’ve been serving up a website. However, the fast-food chain’s website is a powerhouse of UX and UI design.

Photo Credit:

The site may always be changing �� depending on campaigns, etc. �� but the UI is always consistent. Same look, same place, same function. This consistency helps to build trust and familiarity. That consistency is carried throughout Mickey Dee’s site as you delve deeper into it.

The interior food pages continue to sell the product as well as tease with other products available. At the same time, they maintain a similar look and feel to the main landing page.

��

Photo Credit:

With familiarity, users are more likely to come back. According to ,�� research shows that the more times users are exposed to something, they more they’ll like and trust it.

Meet a User’s Desired Need

But maintaining visual consistency isn’t all that’s happening here. �ѳ��ٴDzԲ�����’s demonstrates that it understands its users and their needs, baking that into the user experience.

At the click of a button, a user can call up the nutritional information on any �ѳ��ٴDzԲ�����’s menu item.

Photo Credit:

Being transparent about their nutritional information also . A user can then add any item into a “meal builder,�� which will tally the nutritional numbers so that he or she can know what exactly how many calories, salt, etc. they are about to down.

��Photo Credit:

Anticipating user needs starts with having an understanding of who will actually come to the site. �ѳ��ٴDzԲ�����’s isn’t the only fast-food chain to grasp this. Chipotle also presents nutritional information to users. However, they take it a step further and use and clever copywriting to showcase how their food is actually made, from marinade to grill. If a user wanted more information on the quality of Chipotle’s food, there’s a link that’ll whisk them away to , which future satiates a user’s desire to understand what it is they’re putting in their mouths.

You can anticipate your user needs in a few ways:

Create user personas. Figure out who the core audience is and who the fringe audience is. Then outline who the ideal user is in those groups, trying to figure out what their motivations are in using your site. In this case, fast-food joints have determined that their users may want to know the ingredients and nutritional facts about what they’re eating.


Craft user stories. Map out how your persona will actually use your site. In the case of these fast-food sites, they created a flow knowing their users�� desire to learn more about what’s on the menu. It walks users from seeing the menu items, drilling down to those items, selecting them and acquiring nutritional information on them.

We delve more into creating personas and user stories in our free e-book, .

Both fast-food chains serve a user experience based on keen insights into its users and their needs. And that’s something every designer can do by outlining who their users are and what they’re goals are.

Conclusion

Really an electronic menu, these fast-food websites sell a product only available in certain locations. While some franchises allow for e-commerce, allowing the user to order and pay through a mobile app, most fast food websites are solely informational.

The user experience focuses on finding a location, menu items, specials or coupons, then visiting the store for a cheap and satisfying meal. There is also a small usage of contact forms for suggestions or complaints. If you click through , you’ll see the obvious user experience right away in the interface design. Usually fun and friendly, some website interfaces play on emotional, down-home feelings. It all depends on the brand.

Understanding who might be using your site and what they want to accomplish will allow you to craft a user experience and interface that satisfies their needs.

For more other practical design tips based on analysis of live websites, check out the free e-book .

��

In this piece, we’ll explain how to get started in UX with the least learning curve possible.

We scoured the web and spoke with our own design team for��the most straightforward advice. Check it out!

While UX isn’t necessarily a new field, its practitioners are just recently being recognized for their specialization. In the past year or two, we’re finally starting to see more people understand how they differ from graphic designers and more general web design professionals. And with a lot of UX jobs opening up, more people than ever are thinking about breaking into the field.

Knowing the Language

You won’t get very far in UX if you don’t know the terminology �� especially��. If you read around, you’ll notice that mistaking the two is a rookie mistake (if not a cardinal sin).

Let’s take a look at why you must know the difference.

UI stands for user interface, and is a less abstract discipline than UX. UI designers build the interface systems that represent the “skin�� of the product. Depending on the size of the company, UI designers might also be in charge of a majority of the design process, or have a more specialized role in outlining the layout and/or flow of the experience.

��

Photo credit:

UX stands for user experience. In a nutshell, this is how the user feels about a product. UX professionals know what people want in certain products, and how to deliver that perfect experience with a physical or digital product. A good UX designer draws on the fields of interaction design, visual design, content strategy, information architecture, and even UI design.

Photo credit:

In short, the UX is determined by the UI, amongst other things. The two may represent different ideas, but they are certainly intertwined. For example, you can’t build a desirable UI unless you know the laws of good UX design. Likewise, you can’t design a great experience if you don’t understand how to create an interface that makes it easy for people to accomplish the goals.

You’ll notice that there’s plenty of interdisciplinary overlap in the design field. Our free ebook, , dives more into the similarities and differences between UI & UX design with plenty of helpful techniques.

Getting a UX Education

There is no set level of education required for a career in UX.

As you might guess, more education means you’re better prepared, but . The most basic education in UX can be done cheaply and easily, even online.

Take a look at these crash course providers:

�� A complete in-person UX education, with classes and workshops held periodically around the world. While significantly cheaper than a college education, even as a part-time student, there are cheaper option available.


�� Online courses, starting at $25/month with different plans for different amounts of access.


�� For $15/month or $99/year, you can access all the online courses. Spending a little extra on the premium membership lets you download the ebooks and videos.


�� An online educator that offers per-course pricing, allowing you to specialize and/or fill in any weak spots in your expertise.


�� Part of the Tuts+ Web Design video courses, this program gives you 16 two-hour lessons for only $15.


�� If you’re not willing to spend any money, here you can access material to teach you the basics.

Of course, getting a in a UX field can only help you. Unfortunately, not every school offers a degree program. While this is likely to change in a few years, for now, Wikipedia has compiled a of schools around the world that offer degree programs.

But don’t rule out related degrees just because they don’t say “UX�� in them. You’ll actually see plenty of UX professionals with an educational background in human-computer interaction, graphic design, web design, or interaction design. In fact, Wikipedia even lists the universities that .

Finding Mentors and UX Communities

No matter your education, you’ll want to know some other UX specialists to help show you the ropes. Whether you’re studying directly under a mentor or bouncing ideas off a community, no UX designer is ever an island.

Mentorship

A mentorship always complements your UX education.

Photo credit: Designlab

Some design programs like include a mentorship in the curriculum. Others like focus only on facilitating the proper pairings between students and experts. Finding the right mentor isn’t as easy as pulling a chair next to the first designer you meet:

Communities

Communities vary in levels of commitment, from paid clubs to free meetups to online forums.

Photo credit:

The is a good starting point, as they accept any level of expertise, even students. Besides insider information about the industry, including salary expectations, they also provide mentorship assistance and networking events. Membership ranges from $35 for students to $139 for all-inclusive services.

For more casual gatherings, try attending an informal meetup. Meetup.com even has a special section .

You don’t even have to leave your home to be part of a UX community. Sites like, , or even the subreddit help UX professionals share ideas and advice. You’ll find that these communities are full of people from all experience levels so that you get a full spectrum of perspectives and advice. ��

Helpful UX Tools

Knowledge and hands-on experience won’t get you anywhere unless you have the right tools. These aren’t necessarily as high-tech as you might expect.

In fact, an old-fashioned pad and pencil is a good first start to sketching out your ideas before digitizing them. In fact, plenty of experienced UX designers still carry around a sketchpad to flesh out ideas. For practice, try sketching out the layouts of your favorite preexisting sites �� this will reveal a whole new level of UX intricacies you never recognized before.

While any notebook will do, we’re big fans of the (worth every cent of the $12).

Photo credit:

At some point, though, you’ll need some digital tools. In 2012, we created the first digital version of our wireframing & prototyping app because we didn’t really see any design tools that were collaborative and covered the full design process (wireframes, prototypes, mockups, etc.). Since then, we’ve added in-app , integration with , and the most powerful available.

Photo credit:

Of course, you can certainly try other options as well. For example, you can make a rough wireframe or prototype in Powerpoint or Keynote, a mockup in Photoshop and Sketch, or create a prototype directly in code. Most of our UX designers learned their skills with these tools when starting out, so it’s never a bad idea to expand your technical expertise.

Respecting the Power of Code

It’s debatable whether or not a UX designer should know code, with plenty of and .

While not necessary, at the very least it will give you an advantage.

While front-end UI and UX designers don’t typically get involved in programming, knowing code certainly helps you create more feasible designs. In smaller companies, this kind of a multi-tasking is especially appreciated. All designs must eventually be built in code, so a little knowledge about the end of the journey will always help in the beginning.

Outside of direct design, you also need to know how to conduct usability testing. Your design, after all, is only as good as the user data shows.

A/B testing is a reliable way to determine your target users�� preferences, and . For more straightforward feedback, tools like allow you to directly question users to hear the results straight from them. even analyze people using your product, sometimes with video recordings. ��

Last, there are that measure the statistics of live sites for you. We recommend for aggregated data, then for segmented behavior.

Photo credit:��

For a UX professional interested in coding, the first places to start are . If that whets your appetite, try learning ��to reduce the learning curve of Javascript. Frameworks like or��can also teach you some basic JavaScript, but they’re more on the intermediate level. Our Chief Product Officer Kamil Zieba followed that exact path of learning: HTML -> CSS -> jQuery -> Bootstrap & Foundation. ��

You’ll also need a good text editor to modify code. While are available, we personally prefer and.��

The Best Articles & Lessons on UX Design

We can only say so much in one article. So we’ll leave you with our favorite UX resources, for beginners and masters alike.

�� Renowned for their usability studies, NNG has no shortage of eye-opening articles with the science behind the craft.


�� The vehicle for usability expert Jared Spool offers blog posts with his wisdom. For $23 a month, you can access the “All You Can Learn�� webinars, featuring some of the top UX experts in the world.��


�� A online publication “by and for the user experience community�� that targets beginners to intermediates with many how-to posts on the fundamentals. ��


�� ��Another community publication, but with the addition of a job portal.


�� The blog of this established design agency features advice from its staff of designers and the CEO himself.


�� This online library of 31 daily UX lessons offers a “crash course�� in the UX craft.


�� The business blog of Luke Wroblewski, product director at Google, that covers a variety of UX topics with advice every designer can learn from.


�� Posting about common myths related to UX design, and links to the evidence that disputes them.


�� An online publication committed to all aspects of web design, which accepts submissions only from its more experienced reader base.


�� With instructionals, op-eds, essays, and studies, this reflects its name as a true online magazine for UX design.


�� Updated roughly once a week, our collection of over 30 free, downloadable ebooks teaches a variety of UX principles through expert citations and real-life site examples.

Free E-books on UX Design

We’ve always been a big believer in free design resources. Here’s some of our most popular UX ebooks from the design library.

�� Know the techniques of visual design, interface design, and UX design. To focus the book on practice, we’ve analyzed 33 examples from top companies. ��

��

�� See how to use tangible design elements to connect with users emotionally. Over 30 visual case studies included.

���� Master the trickier side of UX design as we explain how to reduce friction, create delight, and design based on people’s perception of time. Over 20 visual case studies in this book.

��

When it comes to user experience and user interface design, Google and Yahoo both do a decent job (granted, in different ways).��

In this piece, we’ll quickly explain some practical takeaways from the UI and UX design of each site.��

Instead of debating which is better, let’s��look at how Google and Yahoo’s interface decisions suit the needs for different user goals (and thus experiences). Google is very straightforward with their interface in helping users easily search the entire web. Yahoo while viewed as similar, has separated itself with a more comprehensive interface that hopes to deliver an experience for entertainment, information retrieval and aggregation.

Google: The UI of its search homepage is simple, clean and offers many options right from the home page. As a result, the experience is extremely smooth since it takes very little time for users to type in their query and find desired results. The user experience is also fun when special occasions are noted with animations on the home page (adding a bit of to the design).

Photo Credit:

As a user, you’ll note that everything is easy to access, easy to find, easy to use, intuitive and fast. Google certainly knows the basic 3 rules of UI and UX:

Make it simple. Never underestimate or overestimate your users. Believe it or not, most people are digital illiterates or slightly better. Part of the “U�� in UX and UI is the user. Always put yourself in their place when designing a website.


Fast, faster. fastest! Don’t load up your home page with too much because people will click off slow loading sites. As Jakob Nielsen suggests, response times start dissolving the illusion that the user controls the experience.


Make it fun! Sites that provide entertainment (or ) as a bonus to satisfying user needs seem to be ��most popular.

If you believe in awards as a mark of distinction, Google has certainly . In addition to the basic search engine, , and even the ideas flowing out of are all great examples of well-designed and well-executed interfaces and overall experiences.

Yahoo: The old, once most popular search engine has gotten used to the number 2 spot and has branched off. ��But like Google, Yahoo is looking to its own version of the future.

Photo credit:

A popular aggregator, the UI of the Yahoo home page allows the user to create their own experience by building their own home page. More importantly, the homepage then adapts over time by filtering content based on how users engage.

Photo credit:

It’s always the same, familiar, friendly page for the user �� except when it’s not. Yahoo seems to like to change the interface �� a lot! While technology will always force changes in user interface and other user experience issues, it’s important to remember the user experience of the human brain �� too much, too soon, too overwhelming. You weren’t taught the simple formula of Algebra in one day.

More often than not, the overall experience shouldn’t change just because the interface changes. When users need to search to find the new functions, they will start slowly and cautiously . Yes, there are pop ups offering video tours of new functions (and onboarding methods), but be truthful �� what percentage of users actually view them?

Button pop ups remain popular because they point to the exact spot upon hover to clearly explain function. The practice of redesign for a branded website is a big step and one companies should use sparingly. It’s much better to introduce many little UI improvements over a period of time than to dump it in the lap of the user, expecting them to catch up with your entire web team’s output in just one day.

If you think about it, the user experience starts the minute someone clicks onto your UI. How much time do you want them spending going “where’d that favorites button go?��

Different from Google in many ways, here’s some of the takeaways from Yahoo user experience and interface design:

Allow users to personalize their experience whether through user actions or . This combination has been one of the differentiators keeping ��Yahoo alive despite Google’s improved search functionality. Yahoo did what every business should consider against competition �� they took other parts of the market and provided solutions and experiences.


Improve the user experience gradually (known as the ) so you don’t overwhelm people who’ve already built up habits with certain features. Change is hard enough but the emotional toll on the user from the anxiety of a new learning curve can be a very negative experience.


The more elements that are added, the user interface must become simpler or at least become friendlier to the human brain. Technology can’t exceed the human ability to interact with it.


Respect the users. If you don’t give them what they want, they will go elsewhere to get it. Websites don’t stay at the top by accident, or forever.


Change for need and not just for the sake of change. Unless you’ll be better able to meet user goals, then .

For more��everyday design tips based on analysis of live websites, check out the free e-book .��

You can read everything you need to know about color theory collected into one easy-reference guide.

is available to download now. Let’s take a peek inside.��

Each color invokes different emotional and psychological responses in users, and the effects are even more powerful as you combine colors. A designer who knows how to apply color theory to web UI design is able to wield a great �� although subtle �� influence over the user’s experience and overall impression.

Illustrating color usage with examples from 24 different sites likes Mozilla, Facebook, Squarespace, and Cadbury, this pocket guide is a crash course on color theory.

What’s Inside:

Briefly condensing the fundamentals of color theory as they apply to web design, this will teach you:

The emotional response each of the primary colors creates.


How to create the right mood for your site, from a energetic and alert atmosphere to a relaxing and calm one �� and all points in between.


Best practices for mixing the right colors together


The six most popular color schemes in web design, and the pros and cons of each.


Our hand-picked list of the most helpful color resources on the web today.

.

There’s no one way to design your mobile navigation�� but some ways work better than others.

In this piece, we’ll examine 5 creative yet highly usable navigation patterns.

The point of UI patterns is to save users time in learning your interface. But this can also be a drawback since it’s harder to stand out if your design just looks like everyone else’s. Like we explored in the free e-book , it’s definitely not easy to balance the two needs.

This is the criteria we based the below patterns on: familiar enough that the controls are recognizable, but flexible enough that you can customize them as needed.

First, let’s start with a quick overview of mobile navigation fundamentals.

The Principles of Mobile Navigation

While we’d like to think of design as a sandbox where anything goes, there are rules �� or at least logical practices �� that keeps everything sensible. Think of these as universal guidelines.

For starters, the obvious difference between mobile and desktop design is the screen size. Mobile screens are smaller, so all parts of the screen become more valuable. For this reason, mobile navigation systems should be minimal: the site’s content needs to stand front-and-center, while the navigation feels almost invisible.

But��because designers are thinking of new ways to minimize the navigation controls, the solutions are sometimes confusing and misunderstood. That’s why mobile navigation must also be coherent. As stated in , use the proper signifiers (e.g. correct visual metaphors)so that the navigation doesn’t require any explanation.

Photo credit: via

Finally, the mobile navigation must be consistent for the entire site. Don’t move the navigation controls to a new location on different pages. This will just disorient the user. Take a look at the patterns below and pick the one that will work best for you �� but once you pick one, stick with it.

1. Sliders

Sliders take advantage of one of the most popular features of mobile devices, the touch screen. However, as a navigation method, they are relatively underused.

If you have only a few elements to go through, sliders are a great navigation tool. With their gesturing controls, they feel natural, as well as fun. At this point, the slide bar is recognizable enough that users know its function, so it’s also a practical choice as well.

Photo credit:

Sliders work especially well for progressive or closely related pages. For example, the above allows users to navigate between four different types of services. The beauty of Uber’s slider is that users can use the same map view for each of the four pages. For them, the slider isn’t just a creative alternative to the norm, it’s also the most practical solution.

However, sliders have a limited range. If you’re navigating between more than 6 or 7 pages, the slider will become harder to navigate.

2. Pictorial Icons

The idea of a pictorial icon is not new. It is one of the most logical solutions to the problem of saving mobile screenspace. The picture on the icon explains where it will take you, making them more space-efficient than text descriptions.

Sure, this satisfies the familiarity requirement, but what makes them creative? The picture itself.

The style of the picture can be anything you want, allowing you to showcase your site’s unique personality. Even if every site had the same icons, each one could still look different based on how they depict the image.

Everyone knows that an envelope icon represents email, but how you choose to draw the envelope is up to you. Realistic or cartoony, simplistic or detailed �� as long as it looks like an envelope, you can do anything.

Photo credit: via

The uses a lot of familiar icons: hearts, music notes, books, house, etc. However, they modify them in a way that’s unique to the app. This makes navigation simple and easy-to-use, but still with enough freedom to separate them from others.

Compare the CircleMe icons to another app��

Photo credit:

�� . The icons from these two apps represent a lot of the same fields, and yet use different pictures. CircleMe uses a camera to represent video, while MavenSay uses a play button within a film strip. Even when they use the same imagery �� a book �� the visual style is completely different.

In this way, pictorial icons are the best of both worlds. They retain the familiarity of what other sites are doing, but still allow the freedom of creativity.

3. Card Grid

As we explained in our free ebook , the card pattern is on the rise due to its simplicity and adaptability to responsive design. The touch-screen navigation of mobile devices turn the basic card format into a grid of buttons, where the user has only to press the relevant card to go to the page.

Cards can be either images, text descriptions, or both together. The point is that they create an organized and coherent system for showing available options.

Photo credit: via

displays the need-to-know information on four of the most visited cities in the Western world. The same navigation could have been accomplished with four textual links taking up a fraction of the space, but the card system adds a whole new level of visual enjoyment beyond just navigation. The push-button format also encourages exploring.

4. Spinner Wheel

Favoring more the side of creativity than practicality, the spinner wheel is just usable enough to be acceptable, making it a viable option for an out-of-the-box navigation system.

Like the slider, the spinner wheel utilizes gesture controls to add a fun and natural feel to using an app. However, unlike the slider, spinner wheels are able to take advantage of the continual repetition of the circle. There is no end; getting to the end of the list means starting over at the top.

Photo credit:

As a daily organizer app, has a lot of competition and has a greater need to set itself apart. The spinner wheel does just that, with the same functionality and usefulness as its competition, but with a bit more fun.

5. Full-Screen Navigation

While other sites are struggling to minimize the space their navigation systems take up, the full-screen pattern takes the exact opposite approach. It might sound contradictory to what we said about saving screen space, but full-screen navigation is very easy to use.

Although you won’t be able to display any content, the full-screen navigation pattern is best for simplicity and coherence. Once the user makes their decision about where to go, then you can dedicate screenspace to content. This pattern is like a one-step-at-a-time strategy, where instead of cramming everything into the screen at the same time, the site “chunks out�� the experience (at the expense of a bit of user freedom).

Photo credit: via

uses a full-screen navigation menu with photo backgrounds to get entice the user to use the app. There is no content on this screen except the navigation options and the relevant pictures. But as an introduction to the app, the pictures set the right mood. The simplicity of the navigation ensures that the user will get where they want to go.

Conclusion

There’s nothing necessarily wrong with more traditional navigation UI patterns like sidebars, pulldowns, or even the hamburger menu�� except that they’re used quite a lot.

Sometimes you need to get creative with how users get around your site. Just remember that you can’t sacrifice usability.

The only thing worse than getting lost in the crowd is being clever for the sake of being clever. Both creativity and familiarity are damaging in excess �� it’s best to find a happy medium between the two.

For a more detailed list of the the best mobile UI design patterns, navigation and beyond, download the free ebook . Across 100 pages, we explain 46 patterns in a simple problem/solution format with examples from today’s hottest companies.

��

Animation and motion in web design is proving to be the biggest thing in recent years. Everywhere you look, there is some hint of movement �� or actual movement in the form of a video or animated tidbit.

But how do you use it? Motion is more than just a good video clip or cartoon character. Creating real motion requires a directed approach and can combine still and moving objects. Here’s how you do it. (And each tip is paired with an example to help foster your imagination.)

1. Be Subtle

As described in the free e-book , sometimes the best motion is hardly noticeable.

It can be a little animation that happens as you move from one moment to the next or the twirl of text as you hover over a button.

��

Photo credit:

Designers can easily obsess over movement and animations,��but users just consider them part of the experience. In either scenario, the key is that movements happen naturally without distracting from the experience. The actions should be subtle��elements that contribute to the overall look and feel of a website design.

Case study: The animation is visible in (seen in the image above) but it is not in your face.��The large images work in an almost slider fashion as they zoom out from each image. If you click through quickly, you might miss it. But sit on the site a few minutes as the images cycle past, and it is almost soothing with its slow easy movements.

2. Be Direct

Use a hero video or full-screen animation to convey motion and movement. However, you’ll want to consider how you convey intent with big movements on the screen.

The caution with big movement on the screen is intent. Does the motion look like it is supposed to? Does it work with the rest of the design and overall message?

Photo credit:

While this usage directly contradicts the subtle approach, either technique can create a lasting impression. When taking the direct approach, test movements to ensure that they work properly across all devices and make logical sense to users. Going with something direct like this only to fall flat, will�� cause users to abandon your site.

Case study: , a website animation company, uses a large video to showcase their work (see the above image).��The high-color, high-animation reel is a classic example of what you think of when you hear animation. And it works for them in concert with a super simple website for all other elements. When you view the site on mobile, the animation is replaced with a static image. A smart move on their part as the heavy animation could hamper the mobile experience.

3. Imply Direction and Create Balance

Direction, balance and depth are techniques that you can use with�� motion,�� or with still objects or images (to imply motion). These elements are often used within an image, video or dominant visual to convey a specific message.

��

Photo credit:

Direction: Use directional “pulls”—�� �� to make a user look across the screen in a certain way to focus on a specific action.


Balance:��Lack of balance also creates a sense of motion. When objects lack balance or the appropriate weight, they create anticipation for falling (which is, of course, a type of motion). Object placement�� is also important to balance.�� For example, an asymmetrical framework can still lead users across the screen while at the same time creating visual interest because everything isn’t so even.


Depth: Motion can happen in a three-dimensional space as well. Depth can create a feeling of distance, which can give a user the feeling of being in the place where the motion is happening.

Case study: The uses subtle animations that guide you through the website from element to element with the�� goal of teaching users how email works. But even without the small bits of animation, the dotted lines create an almost moving path that directs the eye on how to navigate through information.

4.��Do the Expected

Objects in motion should move as expected. Actions and interactions should mirror reality, making digital objects work just like their physical counterparts.

��

Photo credit:

This is a vital concept, especially for app and mobile elements where users will constantly touch the screen to perform tasks or actions. .

Think of it this way. You have a music app with a volume knob on the screen. It should turn clockwise to increase the volume and counterclockwise to decrease the sound because that’s how it would work in the physical world. As described in the free -ebook��, your site or app should remain consistent with familiar patterns so users don’t get confused.

That’s one of the reasons gravity, for example, is so important for motion. Great user experiences are rooted in reality and great digital interfaces work similarly.

Case study: While there are varying scroll animations taking you through , the most on-point movement is near the end of the scroll when the resume is placed inside (or pulled out of, depending on which way you scroll) of an envelope. The motion is in perfect sync with how it would actually happen on a screen with other perfectly realistic objects.��

5. Watch Your Speed

The biggest missteps when it comes to motion are often speed and timing. When things work too quickly), it’s jarring and can make users feel uneasy, even if they can’t identify the root of the issue.

Users will feel like they’re losing control if everything works too slowly.��

��

Photo credit:

You can think of timing and speed almost like you would think of a movie. Imagine you are filming and then watching the motion from your screen frame by frame. Can you take in all the information before the next action occurs? Are you waiting for the next thing to happen?

Speed also creates an emotional and physical response from users. Quick-paced action can feel chaotic and rushed, while slower movements are relaxed or could be considered lethargic. Match the pace of movements to the speed of actions you hope users will take: Do you want them to do something quickly (such as sign up for a form or make a purchase) or hang around the site for a while and explore?

Case study: uses animated lettering, shifting between different typefaces inside a photo frame to encourage you to perform an action. The speed of these motions is what makes this site successful �� the letters are odd bits of typography that are still easy to read and understand because they move slowly. (Play around with this site —��it will combine letterforms and make any word of your choosing.)

6. Tell a Story

For motion to have purpose and intent, it is should do something.

When it comes to your message or brand, that “something�� is to tell a story.

��

Photo credit:

But don’t overthink it. Motion does not have to tell the history of your company.�� Motion can tell a story that happens in an instant or moment, such as how to click a button or how to interact with your site. When it comes to your story, think about what users should take away �� is it�� to perform an action based on the message (call to action) or to remember who you are (informational)?

Let the answer determine the type of story you tell.

Case study: This above shows us how each famous logo has changed over the years. The quick animations for each logo blend so you can see the changes from logo to logo. While the speed of motion might be a tad fast, the end result is a beautiful visual story.Without even reading the text, you can see the evolution of each company mentioned.

7. Determine How to Use Motion �� For the Interface or for Aesthetics

Proceed with caution. Too much movement can make a user motion sick. Seriously.��

Photo credit:

Do you want to visit a website that uses parallax scrolling effects with dancing characters on the screen and buttons that change shape every time you whisk the cursor�� by? Probably not. It would be quite overwhelming.

So decide how movement is used in your framework �� is it a tool or a visual?

Case study: The does something here that breaks all the rules. The site uses motion as part of the interface and for aesthetics. It’s a difficult design to pull off, but here it comes together.

Think of it this way. The small divots �� did you see them before we pointed them out? �� are purely visual. There are other visual cues as well, including the main hero video. Then there are the user tools, such as hover states for the buttons and a cool loading animation. (And if this concept does not work for you, any click takes you to a more traditional cars sales site.)

Conclusion

There’s plenty of ways to use actual or implied movement in web design projects. Work with purpose and intent to find the most success. Remember that motion, movement and animation should have a life-like quality (or be so fantastic no one would ever mistake it as an attempt at reality).

Motion and movement in web design will only continue to grow and evolve in the years ahead. Don’t forget that motion is just as powerful a tool for transitioning users between content as it is for adding a bit of background visual delight.

To learn more about mastering animations and interaction design, check out the free e-book . If you’re interested, also just released a new custom . It’s pretty fun to play around with, and adds lifelike animations to any web or mobile design.��

��

As we roll into summer, the UXPin team has been working hard to bring you some great updates and improvements to our collaborative design platform–and they are finally here!

Take a look at the latest and greatest features and updates available in right now.

1. Build more fluid animated prototypes without code

With the��new in , you can easily build lifelike prototypes. The new visual editor allows you to create advanced animations with precision, giving you complete control over changes in size, color and movement.

No code required. Just create your animation right in your prototype and it works exactly as it should.��

2. Easily create multistate elements to display complex��content

With our new Multistate Elements Library, you can create animated sliders, tabs, menus or elements that can switch content on-demand, with pre-built animations.

Check out these amazing new elements:

Slider
Menu
Tabs
Carousel

3. Give your animations a more natural feel

Easing is a great way to smoothen your interaction design. We now offer more comprehensive and advanced easing options.

Get a complete guide to easing

4.��Create��better mobile prototypes with new gestures

The��new mobile gestures in help you to create a rich prototype that works exactly like a real mobile app. You can now add mobile triggers such as tap, swipe, pinch and press.

5. Share prototypes with anyone on any device

We know how important collaboration is for all of your projects. Now, not only can you send projects to colleagues and clients via URL and email, you have the capability to share via SMS, for immediate feedback on any device.

Want to share your mobile prototype with someone so they can play with it on their mobile device or tablet? No problem.

Just click the “share�� button ��on the top, right hand side of your screen and then click the SMS tab. Type in the phone number, and go ahead and send the prototype.

Alternatively, you could also generate a QR code or send the prototype to the person’s email.

To get started, just head on over to our homepage and .��

As described in the free e-book , landing pages are essentially your ‘shop window�� and you have one chance to impress the user. Do this, and it’s likely that they will go on to browse the rest of the site, perhaps even making a purchase and reading through your carefully crafted content along the way.

In this post, we’ll deconstruct a few visual examples and explain UX best practices for every landing page. ��

When considering the design of the page, there’s no doubt a lot to think about.

The amount of content, your headlines, images, forms and that all-important call-to-action. Your first step should be to fully understand what the aim of the page will be. It’s almost always the case that some kind of sales objective will be the focus of the page, so what’s the best approach to designing with that in mind?

#1: Become the User

The first thing to do when thinking about your landing page is to put yourself firmly in the shoes of the visitor.

Ask yourself:

What information needs to be present to quickly and effectively convey the key message?


How can you immediately ��communicate the product or service to the user?


What are the key questions in the user’s mind?


Who is the user?

By firstly understanding who the user is based on the that have (hopefully) been developed by your marketing team, you can gain a better understanding of how they might arrive at the page and what they, as a group, prefer.

Photo Credit: “Sketchy Empathy Map Template��. . .

You can also use or to gain a further understanding of user profiles and behavior. ��will help you further understand them and craft a page that gets results, but we’ll get to that a little later on.

#2: Borrow from Other Disciplines

is a term that encompasses several disciplines to successfully grow a business at scale. It’s seen a in the past few years, even becoming a buzzword of sorts (especially for anyone in Silicon Valley).

In this context, we’ll look at Dropbox to see how they applied a few growth hacks to acquire an astronomical number of users in an unbelievably short amount of time.

Dropbox began using AdWords to market its services but soon found that this was very expensive and . The page below is an older one from when the service launched and which illustrates very well how the simplest of landing pages can be the most effective.

Photo credit: (annotated from original).

Taking a look at the above, we can see that the page was specifically designed to encourage signups and downloads.

Title �� conveys very simply and effectively what the product does and how it’s useful to the user.


Sub-header �� encourages the user to delve further if they’re still not convinced that this is the product for them.


Header 3 �� gives the answer to the immediate question of compatibility that would be on the mind of many users.


Header 4 �� contact information for feedback, press and investors for further promotion and to collect user-reported errors/bugs.


CTA x 2 �� further calls-to-action allow users to either dive straight in and download Dropbox or gain further information.

When a user lands on this page, it’s immediately obvious what’s required of them. The page was specifically constructed to attract signups and that’s exactly what it did. A year after the service launched, Dropbox also created a second video for Digg which gained the company

If we take a look at the latest version of the page, we can see that not much has changed �� why mess with something that works?

Photo credit: (annotated from original).��

The top CTAs draw attention to the fact that there’s a version which is suitable for the business. The imagery, while simple, effectively conveys that the software is compatible with any device. The most prominent CTA though �� the signup button �� tells us that Dropbox is still focused on gathering new users.

Once you delve a little deeper and sign up for the service, the process is again simple with not too many form fields to complete. Just like we described in the free e-book , the user input process feels more effortless because the design dangles a clear incentive in front of you: if you finish your registration and invite other users, you’ll get more storage space.

In the Dropbox landing page, everything above the fold invites users to sign up through the use of strong, clear CTAs, simple language and imagery.

The most important thing to take away from Dropbox is that the user must know what is expected of them by the use of clear signifiers, language and imagery.

Type size should be large enough so that users can read it quickly. We’d recommend your call-to-action type size is at least 25% larger than body copy, with appropriate as needed to reassure users (Jared Spool actually helped one company more through smart microcopy).


Less is more: try to limit your H1 headlines to less than six words.


Sub-headers (H2, H3) should be used when it’s necessary to give more information


Speak to benefits rather than features.


Choose relevant images and .


CTAs should clearly direct the user into taking the desired action.

If you need to provide a lot of information on the page, you should save this for beneath the fold and present it in snippets of text, rather than large unbroken paragraphs.

Photo credit:

Performance-wise, you want the landing page to be as lightweight as possible and to be mobile-friendly. In fact, as KISSMetrics reports, slow load time dramatically reduces conversions since nearly half of all web users .

In days gone by, we were told that it was best to use one CTA on a landing page. As you can see in the above examples, Dropbox use several. This is fine as long as you craft each element carefully and it has a clear reason for being there.

#3: Create Trust Through Transparency

As stated in the free e-book , a landing page should immediately start building trust with the user.

With this in mind, your landing page should try to include the following elements.

Social proof �� Now is not the time to be humble or shy. If you have a good social following (or prominent customers) then brag about it by name-dropping and listing the number of users (if they’re impressive).

Photo credit:

Privacy �� Always a concern for users, so ensure that you include a link to the privacy policy in the footer �� it doesn’t have to be prominent. You could just as easily include microcopy reassuring users that their data is safe (which is what we also do).

Photo credit:

Contact information �� Either place this in the footer or provide a clear link.
Testimonials and case study links �� Always useful for some businesses to improve trust, especially when paired with plenty of images of the person or companies involved. These are especially powerful when used in conjunction with social proof indicators (like logos of companies who use your product).

Photo credit: via

As a broader note, make sure your copywriter and designer work closely together to ensure that all content on the page (written and visual) is as clear as possible with no factual inaccuracies or potential for misinterpretation.

#4: Create Forms Based on Audience

On a landing page, a form should ask for only information that’s relevant.

If the exceeds the inconvenience of doing so, then the user will always proceed.

Consider the following:

Is there an offer that can be redeemed by filling in the form? Never underestimate the power of the carrot in form design.


What kind of information are you asking for? Often, a visitor is turned off by the insistence that they have to enter their phone number, for example.


How trusted is the site? If the site has been around for a while and is credible, then the user is more likely to input more information. Again, this is why you should always try and include testimonials, social proof, and case study links.

As always, design the right form for the right user. If the target audience is in the younger age bracket, then they may be filling in the form on a smartphone and will become frustrated by too many fields. For mobile users, try to limit your form fields to 2-3.

Try to as well. Not only can they provide social proof as they often display the number of followers for each connectable network, but they provide a quick and easy way to avoid having the user input a lot of information.

��

Photo credit:

If, however, you know your user input process requires multiple steps (like for e-commerce, airline sites, car rentals, etc.), chunk out the steps and include a to incentivize users.

To learn more about form design, we highly recommend this . If you’d like to see visual examples (with analysis) of some of the best form designs we’ve come across, check out our free e-books and .

Creating Landing Pages that Work

When it comes to an enjoyable and valuable landing page experience, simplicity is key. Know your users and their preferred device (verify with site analytics), then design accordingly.

Photo credit:

We strongly recommend that you A/B test your landing page designs. You should only test one (two at a push) element at a time for best results, ensure that you have a good-sized sample, and allow the test to fully run its course. Many purely because they aren’t set up correctly or because the designer/marketer jumps to premature conclusions.

The UX of landing pages is an art which relies on understanding the user and their needs. This understanding allows you to create design elements and copy that really speak to the user and immediately convey what’s in it for them.

For more tips on designing web pages that create the right first impression on users, check out the free e-book .��We’ve included visual case studies from 33 companies including Google, Twitter, Medium, Intercom, Bose, and others.��