Will Wearables Wipe Out the Smartphone?

An attendee tries a video game on a Samsung Electronics Galaxy Gear Virtual-Reality headset at the Tokyo Game Show last month.

An attendee tries a video game on a Samsung Electronics Galaxy Gear Virtual-Reality headset at the Tokyo Game Show last month. Credit: Tomohiro Ohsumi/Bloomberg

Crowdtap’s new report defines UGC as it exists today and explains why the rise of consumer-generated media is one of the biggest trends in marketing right now.

It has been a month since Apple updated its wrist wearable tech to WatchOS 2. Users are discovering that Siri is smarter, the new cityscape timelapse watch faces are pretty cool, and QuickPlay makes it easier to shuffle your music.

Personally, I don’t need another bedside alarm clock, so nightstand mode isn’t necessarily for me. However, Apple Pay adding loyalty and in-store cards has pleased my wife and I’m enjoying a spot of time travel, catching up on the previous month’s news headlines and planning my diary for the future.

At the end of the day though, these upgrades to the Apple Watch are little more than gadgetry gimmicks, designed to enhance the appeal of a watch that no one really needed (they already owned a Tag Heuer, a fake Rolex or G-Shock), and to distract from the fact that it’s still just a notification alert machine for your phone.

But that’s ok, really. It’s ok because consumers and advertisers need more reasons — however superficial — to start embracing the wearable-tech revolution, because the smartphone’s days are numbered.

Yes, you read that correctly. Despite smartphone penetration continuing to rise and forecast to reach34.2% worldwide by 2017, a decline will, at some point in the future, set in.

The cause of this decline will in part have to do with the emergence, acceptance and growth of virtual reality as the new medium-of-choice for information, and then communication.

When considered alongside an autonomous future for wearable technology and a behavioral change that will see us use other senses such voice-activation commands to call up holographic screens, we must conclude that one day, the smartphone will find itself superfluous to user requirements.

Don’t just take my word for it, though. Let’s look at how the tech companies are already preparing for this brave new phoneless world.

While Samsung Gear VR and Google Cardboard represent two smartphone-integrated devices currently available to consumers, the sensory VR market will begin to grow significantly with the launch of dedicated headsets from Oculus Rift, Sony’s Project Morpheus, the HTC Vive and Microsoft’s HoloLens beginning early next year.

This real market for VR headsets will begin with gamers, but as our homes and cars grow ever-smarter, so will everyday applications for these autonomous devices.

One day, we’ll plan our journeys via virtual headgear, call up holographic motorway maps to check for accidents, and then send the data straight to our car’s dashboard with the swipe of a hand or voice command.

Watches will be among the first wearables to replace the phone as the hub. Apple understand this, which is why as part of the WatchOS 2 update it has also included tetherless wifi and a complete independence from the phone for third-party native watch apps.

The Apple Watch is already branching out on its own and is encouraging brand-app developers to use more of the watch’s hardware capabilities to help it cut deeper into the iPhone umbilical cord.

For instance, the Apple Watch can now view and display video and audio, record and play black audio messages and display animations. A twist of the watch’s digital crown can now control software knobs and menu boxes within third-party apps such as PCalc and the Weather Channel.

By giving developers access to the watch’s accelerometer and heart-rate monitor, it has opened the door to more advanced third-party fitness and sleep-tracker apps. By giving developers access to the taptic engine (built-in technology that allows devices to “tap” users on the wrist), it will allow brands to start really playing with users’ senses. It will also enable new and intimate ways for us to communicate in the future.

Why use a phone to text or What’s App when you could get someone’s attention with a gentle tap or even send something as personal as your heartbeat?

Our complete reliance on smartphones and the fact that they have infiltrated every aspect of our lives makes it hard to envisage a future without them. But that future does exist.

Content will still travel from device to device and the principles of omni-channel content will evolve to accommodate less screen-based messaging and more sensory experiences. Marketers and technology developers need to start planning for the future today.

by.Jez Jowett

The New Rules for Scrolling in Web Design

What was once taboo in website design has made a complete resurgence as one of the most popular techniques in recent years as users are finding a new love and appreciation for sites where scrolling is a necessity. Shedding its old stigmas, scrolling is reinventing itself as a core interaction design element – that also means designers need to learn the new rules.

Website Scrolling

Photo credit: Fitbit

In this piece, we’ll explore the rebirth of scrolling, discuss some pros and cons, and list out some quick tips for the technique.

Why Scrolling is Reborn

The simple answer is mobile devices.

Ever since mobile users have surpassed desktop users, UI designers everywhere have adjusted accordingly. And with so many users on smaller screens, scrolling is becoming more of a necessity: the smaller the screen, the longer the scroll.

But there are other factors. Access to high speed internet is available in more places, making the scroll a quicker way to access information than clicking from page to page. The growing strength of social media sites also feeds the technique: scrolling naturally accommodates their wealth of user-generated content.

As explained in the guide Web Design Trends 2015 & 2016, long scroll evolved right alongside card-based design. When combined, the techniques let you provide users an endless stream of bite-sized content (which is perfect for web and especially mobile experiences).

Upworthy

Photo credit: Upworthy

Plus, the above-the-fold doctrine that was holding scrolling back is now being recognized as the myth it really is. The truth, according to actual studies, is that users really don’t mind scrolling. The practice of jamming everything above the fold is losing out to spacing everything out along a even and smooth scroll.

Part of the reason the myth became popular, of course, was that scrolling was only seriously considered as an intentional design pattern after advances in Javascript and CSS. Before that, it was much more difficult to make scrolling “sexy” through visual storytelling. As you might imagine, a long page full of text (interrupted by occasional images) isn’t a very engaging UI layout.

The Boat

Photo credit: The Boat

But once you start approaching the long scroll as a canvas for illustrating a beginning, middle, and end (through graphics, animations, icons, etc.), then you start to see it’s film-like power in capturing user attention.

In fact, some hybrid patterns are emerging as the latest trend in scrolling. For example, the “fixed-in-place scroll” that we use on our own UXPin tour page creates the same interactive experience of a traditional long-scroll site without stretching the site vertically.

The Boat

Photo credit: UXPin

Is Scrolling Right for You?

With every design technique and tool, there are those who love the concept and those who hate it. In most cases, neither side is intrinsically right or wrong; that’s why it’s important to weigh all considerations before tackling such a project.

Advantages of Scrolling:

  • Encourages interaction – With the ever constant stimulation of changing element, it can be an interesting storytelling method that encourages user interaction – especially with tastefully-executed parallax scrolling.
  • Faster – Long scrolling is faster than clicking through a complex navigation path and does not slow down or limit the user experience. As described inInteraction Design Best Practices, the perception of time is often more important than the actual passing of time.
  • Entices users – The ease of use promotes interactivity and increase time on site. This is especially true for infinite scrolling sites, where you can help users discover relevant content that they may not have even thought of.
  • Responsive design – Page designing can get complicated across devices with different screen sizes and capabilities, but scrolling helps simplify the differences.
  • Gesture controls – Scrolling seems organically linked with touch, since swiping downwards is much easier than repeated taps on different areas of the screen. Users (especially mobile) are commonly accepting this as a way to display information.
  • Delightful design – Few clicks can result in quicker interactions for a more app- or game-like user experience.

Bauer

Photo credit: Bauer

Disadvantages of Scrolling:

  • Stubborn users – Nevermind why, some users always resist change. Nonetheless, the technique is so widespread now (especially during mobile experiences) that it’s probably safe to say that the majority of users are accustomed to the technique.
  • SEO drawbacks – Having only one page may have a negative effect on the site’s SEO. (To learn how to minimize these SEO downsides, check out this Moz piece for parallax scroll and this Quicksprout piece for infinite scroll.)
  • Disorienting – The disconnection between scrolling and content may leave users confused or disjointed.
  • Navigational difficulties – It can be awkward to “go back” to previous content on the page. To counter this, you could create a persistent top navigation where each item is anchored to a page section
  • Site Speed – Large pieces of content such as video or image galleries may slow down the site speed, especially for parallax-scrolling sites, which rely upon Javascript and jQuery (check out this tutorial to learn how to create parallax sites without slow site speed).
  • No footers – With infinite-scrolling sites, we’d recommend a lean “sticky” footer so you don’t sacrifice navigability. Otherwise, users may be confused by a lack of further navigation at the bottom of the page.

Advantages and disadvantages aside, the long scroll is a technique that suits some types of sites more than others. Longer scrolling websites and best suited for content and design plans that…

  • … are going to include a significant portion of mobile traffic (most users)
  • … include frequent updates or new content (such as a blog)
  • … have a lot of information presented in a singular way for comprehension (such as an infographic)
  • … do not contain rich media because of the drain this can cause in terms of load times

Social media sites, with constant and extensive user-generated content, do well with long scrolling (in fact, Facebook and Twitter helped popularize the technique years ago). On the other hand, goal-oriented sites like e-commerce – which require coherent navigation – tend more towards conservative page lengths.

Amazon

Photo credit: Amazon

The middle ground would be a site like Etsy, an online store for user-generated products, which uses a hybrid solution: several pages of so-called “infinite” scrolling, ending with a call-to-action of “Show Me More.”

Etsy

Photo credits: Etsy

Like all web design trends, don’t use longer scrolls just because you’ve seen other sites follow the pattern. Make sure your website fits the criteria we’ve discussed, otherwise you might actually experience worse performance.

Scrolling Best Practices

Long scrolling, parallax effects and similar mechanisms are still relatively new to the realm of design (~4 years) , but still some rudimentary trial-and-error has produced some fundamental best practices.

Summarized from Web Design Trends 2015 & 2016, here are some everyday tips for successfully implementing long scrolling.

  1. Don’t be afraid to alternate long with short scroll. Let the content dictate the scroll length, not the other way around. It’s totally fine (and quite popular) to use a short-scroll homepage and long-scroll landing pages (like Products, Tour, etc.).
  1. Consider sticky navigation, such as that used by Free Range Designs, so that users can always “get back” quickly or bounce from element to element in the scroll.
Free Range Designs

Photo credits: Free Range Designs

  1. Suggest scrolling with design elements or tools so that every user can quickly see how the site works. Arrows, animated buttons or similar user interface tools are fun and easy ways to help the user determine what to do next. Some sites even include a small button with instructions like “Scroll for More” or “Get Started” to help navigate a site with unconventional techniques.
  1. Make clear distinctions between scrolling clicks or taps and other calls-to-action so that your website gets the desired interaction.
  1. Do some research and look at how users are interacting with the scroll. In Google Analytics, for example, you can open the “In Page Analytics” tab to see how many people click below the fold. Based on the data, you can then tweak the design as necessary.
  1. Don’t go overboard. Long scrolling does not mean 500 pages of continuous content – a long scroll can also be simple. Tell your story and then stop. Don’t force it. Deca, below, uses a scroll that is only a few pages long.

Decasrl

Photo credits: Decasrl

  1. Focus on your user goals and accept that even infinite scrolling sites are not truly endless. When creating longer-scrolling sites, understand that users still require a sense of orientation (their current location) and navigation (other possible paths).
  1. Include visual cues that help orient users in the scroll, such as the helmet icons used in the left hand side for “The Seven Types of Motorcycle Rider” site below.

MCaleicester

Photo credits: MCaleicester

Scrolling can be a double-edged sword, so stick to its recommended usage to avoid it doing more harm than good.

Pageless Designs of the Future

Long scrolling sites are not going anywhere. While we’ve seen ebbs and flows (or increases and decreases) in the sizes of screens on popular devices, small is here for the foreseeable future. And small screens require more scrolling.

Actually, the transition from long-scrolling to “pageless” design has already started, and some designers (like those at Digital Telepathy) even believe it is the future of the web. As websites continue to shed some of the constraints of how users think about and consume information, designers must think more radically about the best ways to create content in different environments.

Photohigh

Photo credits: Photohigh

Interaction design is the foundation of long scrolling website design. If users like the interface and find it intuitive and fun to use, then they won’t really mind the length of the scroll (as long as it’s not atrociously long).

You don’t always need to shorten the line – you could just make the wait far more entertaining.

by 

Four Common Prototyping Traps To Avoid

There’s a scene in “Raiders of the Lost Ark” where Indiana Jones winds his way through a Cairo marketplace. Suddenly, the crowd parts, and Indy faces an assassin brandishing a wickedly curved blade in a series of expert flourishes. The expectation is that the two will engage in an epic swordfight—except Indy wearily pulls out a gun and shoots the assassin dead. Done. Instant classic.

Perhaps you know of this famous scene already. But what you might not know is how it came to be…

The script did originally call for a long, carefully choreographed fight that would have taken three days to shoot. But Harrison Ford, who played Indiana Jones, had an agonizing bout of dysentery at the time and needed to take a break every 10 minutes. Ford recalled in an interview posted on Reddit: “I was puzzling how to get out of this 3 days of shooting, so when I got to set, I proposed to Steven [Spielberg, the film’s director] that we just shoot the son a bitch and Steve said ‘I was thinking that as well.’ So, he drew his sword, the poor guy was a wonderful British stuntman who had practiced his sword skills for months in order to do this job, and was quite surprised by the idea that we would dispatch him in 5 minutes. But he flourished his sword, I pulled out my gun and shot him, and then we went back to England.”

What does this have to do with prototyping? Like the swordsman who spent months training and preparing for his scene, we sometimes labor over prototypes so polished that people mistake them for the real thing. Instead, the project demands called for a simpler, faster prototyping solution to communicate your ideas.

While high-fidelity (or hi-fi, for short) prototypes are certainly fun to play with—and even more fun to make—they can sometimes be overkill, leading you astray if you’re not careful. This article will go through four common prototyping traps, along with advice from a few design pros on when using lo-fi prototypes a quick, easy shot is best. For other occasions, our experts also offer tips what to do to keep your high fidelity prototypes simple and elegant.

Trap #1: The Visual Distraction

Test subjects and clients are so distracted with the way it looks that they start critiquing the look—rather than how it works.

“A lot of people want their prototypes to reflect every nuance and every pixel of the product, but you risk eliciting reactions that aren’t useful,” says Jeff Harrison, Sr. User Experience Consultant at Evantage. “The classic example is in usability testing, when you’re trying to optimize the flow. If the prototype looks too good, people will often spend all their time talking about the colors.”

A lot of people want their prototypes to reflect every nuance and every pixel of the product, but you risk eliciting reactions that aren’t useful

The solution, Harrison advises, is to use simple images, minimal color and plain backgrounds to help subjects focus on the specific task you want feedback on. “Some of my greatest prototyping achievements for clients look completely mundane and not at all colorful,” Harrison says.

Trap #2: The Forest for the Trees

High-fidelity isn’t just about visual design—it can also refer to the functionality of the prototypes.

With so many things to do, it may be hard to focus. Clients and test subjects wander from tree to tree, getting lost in the beautiful forest you’ve created, making it hard to get focused feedback.

One piece of advice from Guy Meyer, a Senior Designer at Digital Telepathy, is to isolate the trees. “I build components rather than pages,” Meyer said. “Then I build these isolated sections out and not worry about the entire site. It just helps with focus.”

Define the task you want to work on, and build a prototype of just that feature or interaction, Harrison recommended. “There are usually two reasons to make a prototype,” Harrison said. “The first is to communicate something better than words. And the second is to answer some kind of question. When we make a prototype, we try to call it something. A user testing prototype. A navigation prototype. It helps you draw attention to something in particular and to focus on why you are building it.”

Later, you can start grouping features to gauge more complex flows and dynamics, Harrison said. This approach works well with several current design methodologies such as atomic design, object-oriented design andstructured content modelling.

Trap #3: Design Overkill

Prototyping software tools have become so powerful and sophisticated that it’s tempting to layer on the bells and whistles. But such efforts are costly. They take time, not just to create, but also to update when the designs need to evolve.

In his seminal article on Lean UX in Smashing Magazine, Jeff Gothelf, advises, “Pick the core user flow (or two), and prototype only those screens.”

Next, “get the prototype in front of customers. Bring them in regularly to test the workflows, ideally once a week,” writes Gothelf, who authored, “Lean UX: Applying Lean Principles to Improve User Experience.” “Collect feedback. Figure out what worked and what didn’t. Tweak the prototype. Hell, gut it if you have to: That’s the beauty of Lean UX. The investment you’ve put in at each phase is so minimal that rethinking, reconfiguring or redesigning isn’t crushing in workload or ego-bruising.”

Another way to scale back the tendency to over-prototype, is to focus on the minimum viable interaction, with the smallest number of steps to accomplish a task. Think of it as the Goldilocks Principle of Prototyping—not too much detail, but also not too little. Just right…

“The key is that the prototypes should contain just enough information to get the job done,” Martin Smith, co-founder of Axure Software Solutions, writes in his article on prototyping in an agile environment, “not too much fidelity taking up too much time, and not too little leaving ambiguity in the design.”

5 Homepage Myths You Should Stop Believing

Trap #4: Creating a Monster

Sometimes, it’s necessary to reach for high-fidelity.

“When it comes to selling a concept to an executive team, we have to go high fidelity because it really helps people to grasp the ideas,” says Russell Wilson, Partner & Head of Design at Microsoft Business Intelligence. “Some people aren’t able to see where you’re going without it.”

When it comes to selling a concept to an executive team, we have to go high fidelity because it really helps people to grasp the ideas

If you need go down this route, there are a few tricks you can deploy to make sure your prototypes don’t freeze, crash or otherwise blow up on you during a crucial presentation.

The first: Constantly test your prototype on all of your target machines, advises Kip Mitchell, the Head of Customer Support at Axure Software. If you’re designing on a top-of-the-line Mac with the latest browser, your prototype will feel zippy and light when you preview it on your machine. But if your client works with a three-year-old computer running an older browser, they might have a harder time loading and interacting with your prototype, Mitchell explains. Testing on target devices is good practice whether you are building your prototypes in code or or using software tools that export to code.

To prevent bloat, you can also streamline your prototype by finding ways to reuse assets. If you’re programming your prototypes directly, try to reuse code to avoid too much copy-pasting. If you’re using prototyping software, many will let you build frequently-used elements once and then deploy them multiple times throughout your design. Also, think about places where applying a global style would make sense. If you’re hand-coding, no doubt you’re already using Cascading Style Sheets (CSS) to define a unified style. Most established prototyping software will also let you establish a single style that can be reused throughout your project.

If you have a dozen interactions, you can put them on separate pages—thereby helping to keep your pages simple and uncomplicated.

Are your pages still feeling sluggish? Add zip to your pages by separating your interactions rather than jamming them all onto a single page. “Focus on the one or two cool things that you want the page to do,” Mitchell suggests. He calls those “hero interactions.” If you have a dozen interactions, you can put them on separate pages—thereby helping to keep your pages simple and uncomplicated. “It’s okay to have another page that looks exactly the same,” with each page highlighting a different hero interaction, Mitchell adds.

Marc-Oliver Gern, who worked on the “Madden NFL 25” property when he was Lead User Experience Designer at Electronic Arts (EA), encourages his designers to think like a performance front-end engineer. “We usually have a checklist that we go through,” says Gern, who now designs products for Brilliant Basics. Gern’s list includes such things as image optimization, designing with the correct screen size and Web resolution and using global styles.

Steering Clear of the Traps

In general, most designers we talked to said that it’s best to start with low fidelity prototypes, and then gradually layer on more detail as you go along. Develop simple components separately, then hook them together to test flow.

“Everyone wants to do hi-fi, and that’s understandable. The idea is that the more accurately you can communicate, the better,” explains Jason Broughton, Head of User Experience at Zappos. “For us, the best practice is to keep things lower fidelity. Early on, you want to be as loose as possible. As you get closer to the final hand-off and deliverable, you’ll want to have higher fidelity.”

Everyone wants to do hi-fi, and that’s understandable. The idea is that the more accurately you can communicate, the better,

“It also depends on the project,” Broughton adds. “If you’re pitching to an executive team, you might want high-fidelity. It’s not black and white. It just needs to adapt to the circumstance.”

That’s a lot like knowing when to stage an elaborate swordfight… and when to just pull out your pistol—and shoot.

by.ALEX PHAM

UX Tips for Mastering Your Next Website Redesign

Businesses can change a lot in just a couple of years. 24 months ago, mobile represented about 10% of all internet traffic. Today, it’s jumped to 25%, and Google has rolled out ranking changes that prioritize mobile optimized websites on search engine result pages. Buyers have changed, as well. Today’s website visitor expects a different experience than those of the past.

There’s a risk in frequent redesign, however. They become willy-nilly and lack strategic end-goals. Whether you work with an agency or revamp the site in-house, it’s crucial to make your website a revenue-driving channel and not just another pretty, shiny homepage.

Do Your Research

Before investing time and resources into revamping your website, map out what you want to change and ask yourself why these need to be made. Be careful with redesigns that happen because “I just want it to look more modern” or “I just felt like a change.”

ux-redesign-01

A website should not only look better, but work better as well. Before doing anything, open up your analytics and record your starting position (also known as benchmark) for visits, search rank, conversion rate and other key website metrics. Create a goal and a strategy for how each of these metrics should change as a result of the redesign.

Having clear growth goals will give you an objective framework to measure the effectiveness of the redesign and process for future improvements moving forward.

Get Personal

Another change in buyer behavior over the last two years is the growing expectation of a personalized experience. 74% of online consumers get frustrated with websites when content that has nothing to do with their interest appears.

Groomed by websites such as Netflix, Amazon, and other adaptive websites, visitors seek out content that is specific and relevant to them. Even YouTube can recommend videos that it thinks you may enjoy. A 2013 Monetate/Econsultancy Study found that in-house marketers who personalize Web experiences see on the average, a 19% rise in sales.

ux-redesign-07

Adding a personalization engine and strategy to your next redesign can help address weak conversion rates. Say you run a clothing business and a visitor recently purchased a shirt on your website.

If they visit your website again and see a promotion for the same shirt design, there’s a chance they’ll just ignore it. To attract and keep their attention, you could display related products, like pants or a bag that matches the shirt, to that specific visitor.

The companies that cut through marketing clutter today aren’t the ones with the flashiest ads, but the ones creating a unique and personalized experience.

Be Responsive

As noted above, buyers are increasingly using smartphones and tablets to find information online, and companies that don’t optimize their website from screen to screen are losing out.

According to a study conducted by Google, 79% of users who don’t like what they find on a mobile site will go and look for the information they need on another site. This shouldn’t be a surprise; if you walked into a store that was messy, unorganized, and had unhelpful salespeople, you’d probably leave immediately to shop somewhere else that was easier to navigate.

Use responsive design to create a site that adapts to fit a variety of screen sizes and be sure to incorporate behavior patterns of mobile users into your redesign strategy.

ux-redesign-05

As part of your redesign, look to lighten the load on your site and ensure it appears properly on a variety of devices and browsers. In addition to load time, look at the structure of your website. Is it easy to navigate? Is there a clear route from research to purchase?

Mobile visitors in particular are action-oriented and need a clear route between point A and B. Use this redesign as a chance to make your site easier for visitors to move around throughout the sales cycle, instead of making them jump through hoops to become a customer.

Visual design choices are often the first to cross your mind (or your boss’s mind) when it comes to website redesigns, and for good reason: the visual experience of a website is significant.

In addition to that, however, make sure that your next website redesign incorporates functional improvements that reflect the way today’s viewers use your website. The improvements may not be as flashy or noticeable as new images or banding, but they can signify the difference between a good-looking website, versus a high-impact one.

Whether it’s the result of new SEO requirements or shifting brand values, you may have to redesign your site sooner rather than later. But how do you approach this monumental change? Well, it takes a mixture of caution and creativity.

Unleash Your Creativity

Once you’ve verified that you’re pursuing a website redesign for the right reasons, feel free to unleash your creativity and try something new. However, it’s also important that you take a calculated approach to your creativity.

ux-redesign-04

Don’t be afraid to consult with other people and accept constructive criticism. By combining creativity and caution, you can increase your chances of redesigning an effective, high-converting website that attracts and converts leads.

Tips and Tricks for an Effective, High-Returning Redesign

If after reading through these points you believe a redesign is the right solution for your website, you’ll want to proceed with a careful strategy. Here are some specific tips to help you maximize your efforts.

  • Gather Lots of Feedback: Next, you need to work on gathering feedback. This includes insights from those within and outside your company. Those within will the company will give you a good idea of what is and isn’t working below the surface, while customers and focus groups can provide feedback regarding visual appearance and functionality.
  • Develop a Budget From the Start: You don’t want to get too far along in the process without developing a budget. This allows you to realistically see which issues you’ll be able to tackle, as well as which ones aren’t feasible.

Focus on UX and Functionality

Approximately 40% of all visitors will abandon your website if a page takes more than 3 seconds to load. That’s why it’s crucial to put user experience (UX) and functionality as your top priority.

If it doesn’t work to enhance the average user’s interaction with your company, then it shouldn’t exist. Use Google’s PageSpeed tool so you can analyze the site speed and optimize for best results. It’s not to late to prevent people from leaving too soon.

by Vincent Sevilla

Interaction Design Mistakes That Drive Us Nuts by Lana Lozovaya

Interaction design can separate the quality sites from the rest of the crowd – if done well. If, however, there are glaring errors in the designs, it will only serve to irritate and frustrate the very people you’re trying to impress.

Here’s a list of my least favorite IxD mistakes that have left users disappointed, confused, and can even at times leave them a little angry.

1. Lack of Contrast

When browsing sites, we like to view designs that pop off the page with clean, crisp contrast. Contrast serves an important purpose – it helps make the content readable, and effortlessly guides users around the page. This is one of the most basic design concepts, and it’s surprising that some sites just don’t seem to get it!

Without enough contrast, either in the color palette or overall presentation, a site can look, at best, a little confusing; and at worst, unreadable.

Interaction Design Mistake Example:


NicolEspose.it

2. Insane Navigation

No matter how out-of-the-box your navigation ideas are, think of your users first. It’s not being boring. It’s being thoughtful and pragmatic. Take advantage of navigation design best practices and principles: clarity, simplicity, consistency and correlation.

Interaction Design Mistake Example:


FlorianMichaut.com

3. Non-Responsive & Poor Touch Targets

Responsive websites are vital these days, and there’s no excuse for creating a site that is difficult to use on your smartphone, unless you’ve done tons of user tests and proven that a mobile-friendly site is not a necessity.

Interaction Design Mistake Example:


Uhren-Shop.ch

4. Mind-Numbing Music

It’s nice to put on some music in the evening and relax. Music can be great, at the right times. However, in 99.9% of cases, the right time isn’t when you’re browsing online.

Few things are more annoying than browsing a site and having an orchestral symphony blaring in your ear at the same time. It’s possibly just about excusable if you’re advertising your next album. But even then, only just.

Interaction Design Mistake Example:


SchlossHotelBerlin.com

5. Pointless Pop-Ups

Yes, they can really be irritating. Sign-ups! Everyone needs more sign-ups! However, there’s always a more elegant way to do your marketing. Pop-ups can be about as annoying as shouting children trying to get your attention. If you must use them, keep them simple, creative, and easy to shut down.

Interaction Design Mistake Example:


RichardAndLevesque.com

6. Poor Structure

I understand how tempting it is to try to be creative. After all, you want your design stand out. However, when creativity just becomes one hot mess, it’s time to bring in some much needed organization instead.

Great designers are great communicators. Visual hierarchy and balance are some of the important aspects for creating a good first impression, shaping user behavior, and more importantly, effectively delivering the message beyond a web page.

Interaction Design Mistake Example:


NewMediaGuru.co.uk

7. Tricky Typography

When I visit websites, I like to be able to access information quickly and easily. We’re not keen on confusing large lettering with difficult-to-read shadow effects. Trying to read words over a moving background, or struggling with teeny-tiny fonts that require a magnifying glass to view them.

Here are a few rules to help you brush up on the basics:

  • Build a clear hierarchy.
  • Pay attention to text alignment.
  • Limit the number of font sizes, types, and colors.
  • Make good use of whitespace where and when necessary.

8. Clumsy Forms

There may be times when you need to ask your users for information, and that’s fine. However, it’s not okay to present them with a form that’s overly long and far too time-consuming to complete. Nor is it a good idea to ask for the same information twice. Ask for exactly what you require, at a minimum, and don’t neglect cross-browser form styling.

Great web form interaction experience comes from clarity, conciseness, and consistency.

Here are a few tips:

  • Highlight required fields.
  • Display progress if necessary.
  • Provide hints.
  • Pay attention to field length.
  • Use advanced tools for customizing form elements.

9. Copying Others, Without User Feedback & Data

It’s not necessarily a bad thing to take inspiration from someone else, but you need to ensure you’ve got the right feedback and data at your fingertips before you do so to make sure you’re designing something of genuine value for your target audience.

Interaction Design Mistake Example:


HarrySingh.in/ vs. the original AdhamDannaway.com

10. Glaring Inconsistencies

It’s ok to mix-and-match styles to a certain extent. However, if the overall effect is just one big, ugly visual “clash” then it’s advisable to get back to the drawing board and start over.

Great IxD is consistent. It gives users a better understanding of how things work, making them feel in control of the situation and increasing their efficiency in working with a web page. As Jakob Nielson said, “The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.”

Interaction Design Mistake Example:


DamianHarrisCycles.co.uk

11. Too Many Effects

The occasional well-positioned interactive animation can really lift the content of your site. However, burden your pages with crazy effect after crazy effect, and you’ll leave your audience feeling a little like they’ve entered the online equivalent of a lunatic asylum, oreven worse.

This one is my crowned winner when it comes to madcap design… I challenge you not to feel a little unhinged after seeing it!

Interaction Design Mistake Example:


CameronsWorld.net

12. Trend Chasing

It’s good to stay a little on-trend. However, spend your days chasing the latest buzzwords and interaction design styles, and you’ll end up with a site that reads a little bit like a cliché. Dare to be different, if you can.

Interaction Design – Four Ways to Get it Right

So, that was my collection of my most hated errors in interaction design. Here’s a handy little list, reminding you how to get it right!

  1. Be goal-driven. Don’t add an effect for the sake of it. Don’t choose a color palette, navigation item, or icon simply because you think it looks good. Look at the end-goal instead. What do you want your site to achieve? Once you’ve identified that, then hopefully, you should have a good idea about what interaction design you should be using..
  2. Remember the human touch. If you’re the artistic type (aren’t we all!) the temptation is to create something beautiful, something outstanding, something that has never been done before. However, if nobody has created and used it yet, there might be a very good reason for that…namely, it just doesn’t work. Remember, the visitors to web sites are humans. Create something that is designed to appeal directly to them..
  3. Keep it consistent. Yes, websites should be spectacular. However, they also need to be usable. There will be certain conventions that you’ll need to follow, in order to make the site easy to navigate and simple to understand. Don’t go against the grain for the sake of being different. Instead, accept that there are certain rules you will need to to implement to help your users access your site with ease..
  4. Test, test, test. If in doubt, test! There are plenty of user research tools to help you define where users get stuck or distracted. Do a/b tests, analyze eye-tracking data or simply ask your customers, colleagues, and friends to try out your new designs. There’s nothing more valuable than genuine feedback and there’s hardly a better way to improve your interaction ideas.

Amazing Typography in the Work of Katlego Phatlane

Last month, HOW’s online editor told me about an awesome fellow from Johannesburg, South Africa, who has some killer designs that feature amazing typography. I know—lots of adjectives in there. Totally necessary.

The fellow’s name? Katlego Phatlane. But he goes by Katt. If you haven’t seen his work, you’re missing out. And after interviewing him, I can safely say that if you haven’t heard him talk about his work, you are also missing out. So read on.

amazing-typography-projects-katlego-phatlane8

Phatlane originally wanted to be an architect, but he found his way into design thanks to an art teacher in his final year of high school. The teacher noticed Phatlane’s knack for problem-solving and suggested he consider studying visual communication.

Amid all the client work, Phatlane seems to regularly carve out time for personal projects. “With most client projects there is mostly always a form of direction required, and the room for experimentation is guided by a lot of rules,” he says. “This is why I love working on my own projects, because there are no rules, no deadlines and the freedom to change things whenever the mood takes me. I find it much easier, though, to work on client projects because I love working in a team environment.”

amazing-typographyPhatlane notes that his biggest challenge in personal projects is to “create something beautiful out of a simple and mostly random thought. The final product is always exciting, that sense of being able to bring my thoughts to life in ways other people can relate [to] is very rewarding.”

When looking at his epic portfolio, it’s easy to assume that Phatlane’s favorite element in design is typography—and he confirms this. He creates a lot of 3D projects and is always looking for ways to fuse these with typography. “Whenever I see type, I see it in 3D almost immediately, so due to a lot of experimentation I don’t publish most projects; but those that I do will go to my Behance profile. It’s the easiest way to show my work to the masses, and it really shows your growth. I love up-skilling and challenging myself, so this network is great to keep track of that.”

One of the HOW team’s favorite pieces of Phatlane’s is his side-project poster “Always try to make type look amaze-balls.” Phatlane says he was inspired to create this after a random day out and seeing a friend’s expression, and goes on to say that he finds inspiration in “random ways all the time.

“Whenever I see something—it could be anything—it gets me thinking about something else,” he says. “I love it when that process begins because I know that some form of project is being born. So I immediately get a pencil and paper and I’m scamping away.”

amazing-typography-projects-katlego-phatlane4

Phatlane considers working with Hearst on the chapter opener for O magazine’s 15th anniversary (pictured above) to be his biggest challenge. Hearst really liked the style of one of his projects and wanted him to adapt that style for the opener. “This was challenging, as I had to adapt something that was so unique to what it was, and creating the same thing with ‘restrictions’ was quite intense,” Phatlane says. “It’s always challenging adapting something you’ve thought up [in a] carefree [way] and just for fun to something that would be critiqued by the world, and it had to look inspired—truly difficult.”

2015_international_web_ads_oct2_300x190He’s at a place now in his career where he’s eager to collaborate with as many people as possible. “I want to be able to work with anybody, because at the end of the day we all just want to make beautiful work, so why not do it together!” he says.

I asked Phatlane whether he has any words of wisdom for designers looking to experiment more in the realm of typography. This is what he said:

“There is really something beautiful about typography that I can’t really say I’ve experienced with any other element in design. Typography is so broad, complicated in its technicality, and so subjective when customizing; but with all that, everyone can have their own unique expression. It’s how language looks, that to me is poetic because it’s like a design element that can relate with anybody from anywhere. This is so special in the global village we now live in; to have such a powerful tool at your disposal is something I wouldn’t take lightly. So if you’re a designer [who isn’t] excited by the sight of a well-designed ampersand, I worry about you.”

[Editor’s note: For the record, Phatlane included a winky face with that last sentence. Though I daresay he will indeed be worried about you—it’s the way of the typography lover, no?]

More work from Phatlane:
amazing-typography-projects-katlego-phatlane9amazing-typography-projects-katlego-phatlane7amazing-typography-projects-katlego-phatlane5amazing-typography-projects-katlego-phatlane3amazing-typography-projects-katlego-phatlane2amazing-typography-projects-katlego-phatlane


qm8u8nkxdxponknnsa92

Mastering Typography

A comprehensive look at the fundamentals of typography and letterforms

Type is at the heart of all forms of visual communication. In this course, instructor Denise Bosler expands upon the foundations of typography, and provides an understanding of type as a means of creating a visual experience. Learn about organization, relationships, composition, message, experimentation and using expressive typography to solve complex visual problems. Relevant design history and theory are examined in relation to these ideas as well. You’ll have the opportunity to broaden your overall understanding of type, and then dig in and push the limits of your typographic creativity!

– See more at: http://www.howdesign.com/design-creativity/amazing-typography-work-katlego-phatlane/#sthash.TCyWGRC0.dpuf

10 steps to building a better government website

By Jose Carlos Linares

Public engagement is a top priority for the federal government, but despite even the best efforts by many agencies, customer experiences with federal services shows that satisfaction rates are at an eight-year low. The American Customer Satisfaction Index’s most recent Federal Government Report shows that satisfaction with the clarity and accessibility of agency information and the process for obtaining federal services declined from the prior year’s results. This does not bode well for agencies when resources continue to be limited, yet customer expectations for how government information and services are delivered remain high.

Citizens expect their government interactions to rival similar experiences in the private sector. Because trust tends to erode when customers are dissatisfied, it is paramount that agencies improve upon the delivery of information and services. One important way an agency can improve customer satisfaction is through a better website design. Here are 10 steps for enhancing the online user experience during the website redesign process:

1. Interview stakeholders
A website designed for everyone will ultimately please no one. By conducting interviews with both internal and external stakeholders – employees, partners, other government organizations, businesses and citizens – agencies can pinpoint their audience, define accurate user profiles and further refine agency goals.

2. Administer extensive user surveys
Agencies often build their websites from the “inside out,” reflecting the organization’s needs, instead of “outside in,” which considers the user perspective. User surveys reveal what real-life visitors want to accomplish through an agency website. By understanding user goals, audience preferences and the types and number of tasks a website visitor hopes to perform, an agency can reach informed design and development decisions.

3. Review web analytics
A web analytics review provides insight into user behavior, content value, specific entrance and exit points and the types of devices used to access the website. Agencies should dive into these metrics to gain an understanding of user goals and construct a better user experience. Web analytics can also  pinpoint opportunities to increase form submissions, subscriptions, downloads and other user tasks that support agency goals.

4. Perform card sort testing
The public does not necessarily expect to find information the same way agency insiders would imagine. Website navigation must be organized in a way the audience understands and expects. With card sort testing, agencies can identify patterns in how users categorize and prioritize information so they can structure content to require less cognitive effort, which improves customer satisfaction.

5. Conduct rapid prototyping and user testing
The best way to evaluate a new design is to allow users to interact with it. By quickly mocking up how a system should look and behave, and then having users evaluate how well it meets their needs and expectations, agencies can gather valuable feedback that can improve the final design, ensure that forms and other processes are simple and functional and reduce the need for changes during development.

6. Create a task-oriented home page
Citizens visit government websites to accomplish a goal, not to admire the graphic design. By strategically positioning the most important and frequently used topics, features and functions, agencies can create a home page that serves as a clear roadmap to help users quickly and efficiently locate information and complete desired tasks.

7. Employ UX design principles
To keep up with citizens’ rising expectations for government websites, agencies must consider the user experience (UX), which encompasses the look and feel plus the usability of a site and focuses on how users interact with a website design. With UX design, agencies can create websites that deliver a consistent UX that is on-brand, in line with business objectives and provides outstanding digital customer service.

8. Embrace responsive web design
Citizens expect to access high-quality digital government information and services anywhere, anytime and on any device in a secure manner. Rather than creating a separate website version for each device, agencies should employ responsive web design, which enables a site to respond to a user’s preferences with flexible layouts that automatically adjust for the screen size, platform and orientation of the device used.

9. Ensure accessibility
Agency websites must be free of barriers that make it difficult for citizens with disabilities to access. An accessible design ensures that all potential visitors, including those with disabilities, will have a pleasant user experience. By making content accessible through screen readers, voice commands and keyboard-only access, agencies can ensure that all users have equal opportunity and access to government information and services.

10. Optimize for search engines
The information on any website is worthless if potential visitors do not know it is there. Government agencies must use search engine optimization techniques to ensure that citizens can easily find their sites and the information they contain. By strategically using keywords, descriptive page titles, clear language and other SEO best practices, government agencies can help users more directly find the information they need.

By following this 10-step approach to building a better government website, agencies can meet their mission of delivering vital government services, engaging citizens and improving customer satisfaction levels, while efficiently using financial and personnel resources.

Top 6 frustrations developers have with designers

Avoid the contents of this list, and designers and developers will get on just fine.

Unless you are designing just for the joy of it – or you are one of the fabled ‘unicorns’ who can do EVERYTHING – at some point you will encounter (and probably lock horns with) someone tasked with taking your pretty little pictures and turning them into a real world product. Like cats and dogs, these relationships are historically known for being… strained.

Of course not all designer/developer relationships are contentious or based on mutual distrust. In fact, increasingly designers and developers are working closer together in agile environments, where the walls have to come down out of necessity.

SUBSCRIPTION OFFER

Still, some of the ill will persists. In order to help alleviate that stress, I’m presenting the most common frustrations I find that developers have with designers and how you can work to avoid them.

 

http://www.creativebloq.com/web-design/frustrations-developers-have-designers-91517020

Join the Sketch revolution with the new issue of net

Plus, get a free web performance ebook!

Welcome to the Sketch revolution! Unless you’ve been living under a rock, you’ll have noticed this app making headway in the design app space. Brian Hoff is just one of many web and UI designers who recently decided to end their long-term relationship with Photoshop and get into bed with this newcomer. This issue, the net team asked Hoff to share his experiences, compare the features in Photoshop and Sketch, and guide you if you want to make the switch.


Brian Hoff compares the features and tools in Sketch and Photoshop

This issue’s fab freebie is a free report on web performance, courtesy of O’Reilly. This 68-page ebook will tell you everything you need to know to become a performance warrior.

http://www.creativebloq.com/netmag/issue-273-91517056