10 Great Quotes for User Experience Designers

An architect’s most useful tools are an eraser at the drafting board and a wrecking ball at the site.
Frank Lloyd Wright

Design cannot rescue failed content.
Edward R. Tufte

Now that we can do anything, what should we do?
Bill Buxton

Good design is making something intelligible and memorable. Great design is making something memorable and meaningful.
Dieter Rams

It’s not what you look at that matters, it’s what you see.
Henry David Thoreau

Beyond the age of information, there is the age of choices.
— Charles Eames

Panorama, vista and prospect deliver viewers the freedom of choice that derives from an overview, a capacity to compare and sort through detail.
Edward Tufte

bonus quotes

Anyone who would letterspace blackletter would steal sheep.”
— Frederic W .Goudy

A design isn’t finished until somebody is using it. — Brenda Laurel

Design is not just what it looks like and feels like. Design is how it works.
— Steven Jobs

Objects and their manufacture are inseparable. You understand a product if you understand how it’s made.
Jonathan Ive

by Ryan Nance

Apple’s Research Kit Now Tackling Autism

In today’s world, technology has been a boon for medical science. There are so many more medical issues that can be caught and treated thanks to machines and computers. Now the iPhone can be added to that list, thanks to Apple’s HealthKit and ResearchKit programs. Recently, there has been one particular app that is gaining some much-needed attention.

Vox reports a team of doctors, researchers, and programmers from Duke University have created an app called Autism & Beyond. Helen Egger, the head of child psychology and Guillermo Sapiro, an engineering professor from Duke are major influences of the team. The app is made possible by Apple’s ResearchKit platform, which is software that helps medical researchers and developers design their own applications for iOS that help medical studies.

ResearchKit allows researchers to collect important health data from iPhone users, especially undergraduate students. Undergrads are a common demographic in University studies and tapping into research data from them with the help of their iPhone, makes data easily attainable and only helps facilitate a lengthy data collection process.

Apps that use ResearchKit can now make it easier to conduct medical research without visiting a hospital or a lab. What sounds so amazing about Autism & Beyond is that the app can use the built-in camera of an iPhone or iPad to scan facial expressions, analyze micro-reactions, and then indicate if a person has a potential risk of autism.

http://www.idropnews.com/apples-researchkit-now-tackling-autism/

Web Development Reading List #109

By

Building products or software is not easy. As developers, we are constantly aware of this fact. As managers, we also know this. As product owners, hell yes. But the most important thing is to also teach our customers. It’s important that we figure out a holistic approach to build a product that pleases the user and all others who are involved.

 

http://www.smashingmagazine.com/2015/10/web-development-reading-list-109/

IS MATERIAL DESIGN KILLING THE WEB?

BY CARRIE COUSINS · WEB DESIGN · OCT 22, 2015

http://www.webdesignerdepot.com/2015/10/is-material-design-killing-the-web/

 

Material Design is the “it” phrase that many designers are talking about right now. The concept, which was developed by Google for Android devices has a neat, clean and highly-usable charm.

Websites featuring Material Design are creeping out of the realm of Android devices and are popping up everywhere. And the reality is, many of these websites have the exact same look and feel.

MATERIAL DESIGN REVIEW

If you aren’t quite sure what Material Design is, here’s a quick primer: it’s a Google-spawned concept with that specifically explains how apps for Android should look and how the user interface should work. It defines rules for animation, style, layout, components, patterns and usability. The specifications go as far as defining color palettes and typography options.

And while all of these elements contribute to a highly usable and visually pleasing design, the result is a collection of designs with a common aesthetic.

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