Looking back over the past century, we see huge strides in technology…and its impact on the art world. Advancements in technology have changed how art is made, conceptualized, viewed, promoted, accessed, studied, experienced, shared, and invented. The process of creating art has seen new opportunities by merging the analog and digital worlds. We’ve put together a list of technology milestones that helped evolve the art we experience today. It’s fascinating to think of the impact that computers, digital cameras, video, and electronics have had over the past 30 years, not to mention what lies ahead.
We find timeless inspiration from the minds of creative legends. Valuable lessons learned help inform and educate us as we continue to solve problems for our clients through design. Let’s keep those creative juices flowing! We’ve collected our top 20 quotes about creativity and design from some of the most insightful minds.
“If you do what you always did, you will get what you always got.” – Albert Einstein “There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.” – Milton Glaser “Digital design is like painting, except the paint never dries.” – Neville Brody “To be a good designer, you would need to have deep and far-reaching interests outside of the profession.” – Stefan Sagmeister “It’s through mistakes that you actually can grow. You have to get bad in order to get good.” – Paula Scher “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” – Antoine de Saint-Exupéry “Good design doesn’t date.” – Harry Seidler “It’s easier to ask for forgiveness than it is to get permission.” – Grace Hopper “Live in the leading—the spaces in between the rules.” – Stefan Mumaw “Good design is like a refrigerator – when it works, no one notices, but when it doesn’t, it sure stinks.” – Irene Au “Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs “Creativity is nothing but a mind set free.” – Torrie T. Asai “Think more design less” – Ellen Lupton “Good design is obvious. Great design is transparent.” – Joe Sparano “Invention is 10% inspiration and 90% perspiration.” – Thomas Edison “Design is all about finding solutions within constraints. If there were no constraints, it’s not design — it’s art.” – Matias Duarte “In order to be irreplaceable, one must always be different.” — Coco Chanel “Great stories happen to people who can tell them.” — Ira Glass “The definition of an expert is someone who knows what not to do.” — Charles Willson “It’s really just a matter of time and resources; if you have those then anything is possible.” — Hironobu Sakaguchi
Conclusion
Feeling inspired? Take a look at our case studies to see how we worked with our clients to find creative solutions to drive their business.
Prototyping has been used in engineering and industrial design to validate concepts and build better products for decades. Today’s web designers are using prototypes to create better user experiences and it’s pushing the envelope of how we use the internet in exciting new ways.
Whenever we set out to create something, we tend to have a pretty specific idea of what that thing is going to look like, how it’s going to work and how it will be used. If you’re designing a chair for example, you can rely on some basic assumptions as to the general form it should take and how someone is going to sit in it. While this approach works well for established conventions like furniture, it doesn’t always work out as neatly in the digital realm. Intuitive as it may seem, rarely does our own, personal perspective do a very thorough job of considering how others will instinctively interact with such a product.
Anytime you design something for others to use, your decisions along the way are likely based off of certain assumptions you make about how your users will interact with it. These assumptions aren’t bad or wrong but they can be based on limited information and in some cases, personal bias. The natural tendency is to think about how a product will be used based primarily on the way you, yourself would use it. It’s not wrong, it’s just not necessarily right for everyone.
What’s missing here is the user. Who else can better speak to how they will interact than the very one doing the interacting? This idea isn’t new. We as designers have always sought feedback on how to improve and optimize what we create and often go to great lengths to do just that. It’s just that before, we weren’t seeking that feedback until after we’d finished building. Conceive, analyze, design, construct, test, maintain – this was the way things were done for a long, looooooong time.
Anyone can see that this approach is slow, frustrating, and expensive. Valuable time and money are spent in the laborious pursuit of incrementally improving upon completed products that are difficult to evolve. If the key to improving on the conventional wisdom is faster access to feedback, how then can one tap into those powerful insights earlier in the process? The answer is prototyping and it’s changing the way designers and developers alike approach building digital products.
The better way.
Prototyping allows new features and elements to be quickly validated or abandoned by creating simulated versions that can be put in front of users before they are completely developed. This iterative process ultimately shortens the feedback loop, allowing products to evolve faster and be more refined.
Prototyping allows you to test the assumptions you make about your users by putting low fidelity versions of your product in front of those very users to observe their behavior and elicit feedback. The prevailing wisdom is to do so early and often, building prototypes that merely resemble what you ultimately hope to release and discovering how users actually interact with it. What results is a continual loop of design, user testing and refining until something very near perfection is reached.
In rapid prototyping this process is performed quickly with little concern for the level of detail involved. The faster an idea can be tested and either proven or disproven, the faster the ideal version will be revealed. Anything from simple HTML mock-ups to downright prehistoric paper models will suffice as long as it is testable. At UpTrending, we use programs like InVision and UXPin to create fully interactive, high fidelity prototypes that give us early insight into how users are interacting with our sites and apps.
Source: UXPin.com
The bennies.
So why go through all the trouble of creating simulations of a final product only to throw them out at the end of the day? So glad you asked.
1. Prototyping is efficient.
Errors or usability issues can be detected far earlier in the process saving time and money in the long run. Why wait until you’ve finished building something to see if users respond the way you expect them to when you can find out sooner and make adjustments along the way? Rejecting false assumptions and eliminating features that don’t work earlier in the process minimizes waste.
2. Prototyping improves user experience.
When the end product is designed for (and in some ways, by) users with their direct input rather than expecting them to conform to a designer or developer’s idea of how things should work, a more intuitive experience arises organically. Since it focuses primarily on the user, guess what? The user experience is just plain better! You are, after all, building this almost exclusively for them, so why not let them tell you how best to get them to do what you want them to do?
Source: Shutterstock.com
3. Prototyping is the future.
Rapid prototyping allows designers to take risks they might not otherwise take if doing so means committing time and resources to building something out completely. Because prototypes are merely simulations, their cost is low but the reward can be significant. What results may be quite different from that which you initially sought to create, but it could be all the better for it. By throwing out personal bias and preconception, we can design outside the box to create better digital products that achieve their intended goals.
Yay, prototyping!
Many traditional approaches to web design fail to give due consideration to the most important element in the design process – the end user. But as you can see, there is a better way. Through prototyping, designers are able to glean valuable insights directly from users which they can then use to adapt and evolve products into their most fully realized selves. And through rapid prototyping, we can shed the conventions and traditions that hold us back to discover new and better ways to improve user experience.
When designers think about user experience, we often think of the end product. We ask ourselves: What is a customer’s overall experience with our platforms, websites, and mobile apps? How seamless are their interactions? The best UX happens when the big picture view and the little details work together. Little details should be considered with every single project. It matters where the user clicks. It matters what happens when they do.
So, how can you ensure you’re taking care of all the details? Many designers are zoning in on microinteractions, the small moments that happen inside and around the overall experience.
Today, we’re going to unpack the concept of microinteractions and talk about how UX can be improved by using them.
Microinteractions, UX’s new frontier
We’re constantly interacting with technology. But what defines our experience? How do we get feedback from the platforms and apps that we spend our time with?
The concept of microinteractions was introduced in Microinteractions, a book by Dan Saffer. Saffer believes it’s the little things that turn a good digital product into a great one, and that microinteractions can help revolutionize a product and a brand.
Here’s how Saffer defines microinteractions:
“Microinteractions are contained product moments that revolve around a single use case—they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or “like” something, you are engaging with a microinteraction.”
These microinteractions have a purpose– to provide an update on the status of an action. They’re a tiny bit of communication to let the user know that their action had a result.
For example, if you like a photo on Instagram by tapping twice, a large heart will appear in the center of the photo, and the heart underneath the photo will turn red.
Here are a few other examples of microinteractions:
Showpad – When users click the “Filter by Industry” button, it reverses the direction of the arrow to show the action being taken.
Source: www.showpad.com/case-studies/
Chartboost – When clicking on the “Get Started” CTA in the hero area, an animated spinning gear is displayed while the form loads.
Source: www.chartboost.com
How to use microinteractions
You probably use a lot of microinteractions already, but are they delighting your audience? The best microinteractions provide a feeling of satisfaction, and make people feel connected.
Here’s how to improve overall UX with microinteractions:
Catalog each and every touch-point
Whether you’re designing a mobile app, website, or software platform, you can start assessing your microinteractions by cataloging each and every touch-point. What are the actions a user can perform, and what feedback do they get when they perform these actions?
Microinteractions are used when:
Things are turned on and off
Comments are made
Making changes
Viewing messages
Receiving notifications
Liking, sharing, or posting on social media
Connecting to other platforms and devices (for example, software integrations and Bluetooth)
Sharing progress along the way
By understanding where are the touch-points are, you can figure out where microinteractions fit in. Are you already using them? Are they accomplishing your goals? How can they be improved?
Both quantitative and qualitative metrics should be considered, so be sure to understand how success will be measured. While fun microinteractions are important, they should be also well-thought out and integrated with the overall strategy to accomplish certain goals.
Decide on a brand voice + tone
Most UX designers use microinteractions to provide user feedback. However, the best experiences come when the microinteractions are designed deliberately to delight, fitting into a greater branded voice and tone.
For example: MyFitnessPal’s brand mission is to be as helpful as possible when someone is trying to track what they’re eating. To be as encouraging as possible (and to make sure they’re not annoying), MyFitnessPal automatically turns off notifications if a user doesn’t respond, and provides updates along the way.
Design to delight
Microinteractions are magical when they delight the user, and many companies are finding ways to upgrade their feedback loops. For example, what happens when a user has to wait while your app has to connect to a server?
Rather than letting the user get bored while they wait, provide them with an update. Uber does this by showing you where your car is located while you wait for it to arrive. Many others do this simply by adding an animated progress update.
Source: Chris Plosaj
Wrapping up
When we start a new UX project, we consider both the big picture and the micro details. After all, what happens once someone starts interacting with our designs? They need feedback to know their actions have an effect, and that feedback should delight them.
If you want to make your audience feel good about the overall experience, you should devote attention to microinteractions. These microinteractions can redefine the user experience and take it from good to great.
Your website works hard to pique interest, inform users, and ultimately drive them to connect with your business. The sign up or registration flow may be the first conversion interaction with your business, and has the potential to make a big first impression. Streamlining this flow will improve the visitor’s impression of your company and turn qualified visitors into qualified prospects or customers.
Here are several ways to improve your sign up flow and make it as intuitive as possible.
Boost your CTA
The first step in the conversion process is intriguing them enough to hit the sign up button. Quickly letting the user know what you do, the value you bring, and why they need you will drive them to sign up.
Put yourself in your customer’s shoes and draw them in with your insight. Personalizing the call-to-action (CTA) button’s copy has shown to significantly increase the CTR. In a test by Unbounce, changing one word from You to My increased CTR by 90%!
A prominent/persistent call to action is key in capturing the user’s information. Placing the CTA in the main navigation or footer is a great way to ensure visibility across the site.
Using a bold visual treatment (color, size, shape, placement, verbiage) that stands out on the page will draw the user’s eye and capture their attention. Within your site’s UI, try to choose a bold color that stands out and clearly communicates an actionable button.
What questions are your customers asking?
Take time to understand your customer’s pain points and how you serve them. Think about the issues or needs they have when coming to your site and answer those up front.
Educating the user is key to a initiating their interest and commitment to your site. Leveraging use cases, ongoing resources, blog posts, and the voice of your site will ultimately drive them to start the sign up flow.
Tips for an easy sign up
You’ve done it!! You’ve wowed them and they’re ready to start using your product…well, almost. Now, the final step to capturing the user’s core information to create an account.
The most important factor in creating an easy registration flow is removing any friction. Friction means areas or features that distract from an easy sign up. A study by Forrester Research stated that “11% of US adults have previously abandoned an online purchase either because they didn’t want to register online or the site they were visiting was asking for too much information.”
Keep it simple
There’s a balance to be hit for the amount of forms, number of required items, and showing the right/necessary information up front.
Limit fields to only required information. This increases a visitor’s willingness to sign up and ability to create a valid account. For most B2B businesses, these fields are: name, company, email, password.
Requiring only an email address may convert well for quick registration, but it creates a longer process to complete the account. The user is forced to confirm the email notification to complete the process. However, showing too many fields at once creates a higher barrier to entry for the user and results in a higher exit rate.
Limit elements outside of the sign up area to make it clear that there’s one thing to do here – sign up.
Guide Users
Every site will have different needs for required information, but being able to guide users through the process is an effective way to make it easy.
For longer sign up processes, break the flow into steps. This makes it more digestible and enticing for users to complete. It also allows them to make edits, changes, and track progress.
A short guided tour works well to hit the key features. If your product is complex, it’s worth requiring a few more clicks to be sure prospects completely understand what they’ll get. A feature like this should optional to the user. Letting them skip the tour covers a wider range of user types and levels of commitment.
Clearly informing the user on the type of data a field requires will reduce any misunderstanding and errors. This could be handled by using tooltip hints, label hint text, or real time validation/error states.
Here’s a simple fix: to reduce clicks, make the first form active so the user can instantly start typing.
Entice Users
On the sign up screen, list a quick preview of key benefits or what they’ll be getting. This could a short list of key features, product screens, or ways you help your customers. Keeping it short and sweet will let them scan this while they’re signing up.
Showcase successful clients to instill a sense of trust in the user. Social proof is a quick way to build credibility by demonstrating that these customers rely on you.
People connect to other people. Including an image of a happy, authentic person builds a human connection to the brand. The user isn’t just interacting with a company, but with real people.
Reassure users that their data is secure and they won’t be getting any spam. The addition of a lock icon gives a sense of safety, as does showcasing the technology you use for security, like Norton or TrustE.
Streamline the flow
What can you do with an extra 5 minutes? Multi-tasking has reached new heights, and an extra 5 minutes is so valuable in our busy days. Saving your customers time sets a good first impression and gets them using your product faster.
Offering users the ability register through a social login gives them the option to save time and reduce the number of unique username/passwords to keep track of. Social login has proven to double the sign up speed.
Open the sign up flow in a lightbox to keep users engaged with the site after they’ve registered. Rather than derailing their experience, it elevates what what they were doing through personalization. Displaying content in a lightbox adds a unique/modern layer to the site’s UX and is scalable for smaller displays.
Test the approach with different audiences. User testing is so valuable and creates metric-driven decisions. At UpTrending, we use HotJar to pinpoint how users are engaging and highlight areas where they get stuck. This insight helps us improve the sign up flow and make adjustments when needed.
Conclusion
An intuitive sign up flow is the first step in your relationship with customers. Putting the customer’s needs first and following these recommendations has proven to significantly increase conversion rate and customer engagement.
What other tips and techniques have you seen to make sign up flows more intuitive? Drop us a line on Facebook or Twitter. We’d love to hear what’s working for you!
The way we create, view, and understand content changes everyday, which keeps web designers on their toes. As new trends emerge, technology enables new ideas, fonts become more accessible, and filters change the way we look at an image, I like to keep close a fundamental design element that I learned early on that is key to hierarchy and visual storytelling – white space.
Web designers use white space to guide the user through content, and to craft how the user understands a given subject. Allowing room for the eye to find the start, dive into the body, and take visual breaks is key to comprehension.
Finding a rhythm of content and white space creates an enjoyable user experience and allows the user to read, browse, or click in an intuitive way.
Enhance Your Message
Removing visual distraction allows the user to focus on what really matters. Guiding users to take action or understand what’s most important can be achieved without adding a single element. By simplifying the presentation, the content becomes more important.
Effective use of white space is a conscious brand decision that is often associated with high-end, luxurious brands and a universal technique that can be applied to any type of content. Giving the message space makes it valuable to the eye.
White Space = Conversion
The goal for any marketing website boils down to conversion. Whether it’s to purchase, book, join, sign up, or follow – we design the experience to guide the user. An essential part of this is presenting them with navigation options in the right location and free of distraction. Allowing the primary call to action to stand on it’s own through proper use of white space will encourage the user to take action, increasing conversion.
“Good design is obvious. Great design is transparent.” – Joe Sparano
“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” – Antoine de Saint Exupéry
“The empty space on a page can be every bit as important as the space occupied by imagery, because even empty space serves a purpose and supports the visual integrity of a layout.” – Jason Santa Maria
If you look in my closet, you’ll see a common “thread” – plaid. My collection has been growing for years now, and it’s not surprising why I’m drawn to this style.
When you break it down, many of the features that make up plaid, I use in web design every day: color, pattern, and cultural reference. Let’s take a look at plaid from the eyes of a designer.
Color
One of the key elements in a good plaid shirt is color. There are infinite color combinations in plaid shirts, which may be why I’m so drawn to them. Shopping for them creates an endless search for “what’s new.” Depending on the type of store you frequent, your palettes will change (ex. Pacific Sunwear vs. Ralph Lauren).
Depending on the person, color combinations can range from conservative “neutral/muted” to an extreme “vibrant/energetic.” This color choice in a person’s clothing tells a story about them:
Do warm or cool hues reflect your personality?
Do you gravitate towards neutrals, or go all out?
How many shades of blue are there in your closet?
Being able to mix 2-6 colors can produce really interesting results and create a unique look and feel. Within a plaid pattern, you’ll see these mixed colors when the bands of horizontal and vertical color overlap.
Most of my plaids are on the cooler side with bright “pops” of color. I’m typically drawn to tertiary color mixes of blues, greens, and blacks, which go well in most places I go – but I do have a few warmer shirts that dive into the yellow and red families for the right occasion. Living in a mountain community, I’ve noticed a trend in darker base color bands, accented by subtle uses of bright color bands.
Pattern
Patterns say a lot about the individual…how experimental in your plaid patterns are you?
The patterns can vary, but are all built on the concept of layering a horizontal and vertical band to produce a halftone mixture. Depending on the material and overall style choice, the twill can also affect the texture of the overlap, creating a halftone pattern. A thicker twill will create a more visible diagonal pattern. I’ve noticed this halftone/crosshatch technique in fine art as well as digital art. I like the connection between the physical woven thread of a shirt and the digital translation to pixels. As a designer, being able to control this can give depth to overall flat/square shapes.
Working with the elements of plaid, designers can produce really unique looks. Some of the key design elements include: squares, rectangles, lines, thickness, thinness, alternating or symmetric patterns. The designer has the freedom to experiment with these to create a cool, dynamic visual rhythm.
Culture
Over the years, an evolution in style can be seen in those who wear plaid. It has been an influential style since the 1500s, when it was worn to distinguish one Scottish clan or region from another. Plaid has often been associated with being a rebel, and staking your claim as an individual.
Dark colors with bright accents, combinations of thick and thin shapes, asymmetrical patterns, complex design.
Hipsters
Ranges from conservative (pale or pastel colors, smaller bands of color) to extreme (bold or vibrant colors, larger bands of color).
Lumbersexuals
Limited color palette, simple checkerboard pattern, thick twill (diagonal pattern).
Preppies
Lighter colors, small symmetrical patterns, traditional approach to overlapping shapes.
Each of these distinct groups carry a unique “look” in their plaid. Variations in the color palette, width of the bands, and tightness of the pattern are ultimately associated with a particular type of audience.
After all, whether choosing a shirt or picking colors for a website, being able to represent yourself through color, pattern, and texture is all about appealing to a certain type of crowd.
Want to design your own?
If you’re ready to ditch boring single-color displays and explore the wide, wonderful world of plaid, here are some great places to start your education and exploration:
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are as essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
