UX – Envato https://envato.com Design & creative inspiration Wed, 26 Sep 2018 01:13:41 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 https://assets.wordpress.envato-static.com/uploads/2016/08/cropped-favicon-32x32.png UX – Envato https://envato.com 32 32 Part 2: Introducing the Envato Design Framework https://envato.com/blog/part-2-introducing-the-envato-design-framework/ Fri, 24 Aug 2018 06:35:39 +0000 https://envato.com/?p=72155 Working towards a framework for design This is Part 2 of our design framework In this post, we aim to introduce the Envato design framework and describe how we apply it. But before we begin, our goal for defining and formalizing the way we work was so we could use it as a tool to […]

The post Part 2: Introducing the Envato Design Framework appeared first on Envato.

]]>
Working towards a framework for design

This is Part 2 of our design framework In this post, we aim to introduce the Envato design framework and describe how we apply it.

But before we begin, our goal for defining and formalizing the way we work was so we could use it as a tool to help us work more closely and effectively with teams and stakeholders to create better and more meaningful products, by aiming to:

  • Agree and align as a team as to how we work.
  • Align with how other teams at Envato work including Product, Engineering and Marketing.
  • Break the misconception that design is a “magical and mysterious black box” only accessible to the mysterious “creative” (not our favourite).
  • Help people understand how to work with design and be more comfortable getting involved in design activities.

Considerations

Like most design functions, our team consists of people with a variety of roles and specialisations. These include UX & UI Designers, Content Strategists and UX Researchers. Regardless of individual role, we recognise that the typical process that each of us goes through shares similar characteristics. We also had to consider that outcomes are never the same. The work is often a mix of product and marketing which each have unique considerations.

This is the Envato design framework for a reason. It was designed to align with our company goals, mission, and the way we work as a company.

Introducing the framework

There are 2 key parts to the Envato Design framework: 1. the visualisation of a cycle to represent the iterative nature of software design and 2. It consists of four key phases with a central reflection step between each of the phases.

Design Framework

Understand → Reflect → Explore → Reflect → Refine → Reflect → Implement → Reflect → …

The four phases are typical of other design processes but the intermittent reflection stages provide our team with much needed “ah ha” moments.

Reflection

Design process - reflect

We realised that for our framework to be successful we needed to be able to reflect back on our progress to the rest of the business at regular intervals. We also noted that reflection as a step wasn’t formalised in our day-to-day processes. When we didn’t reflect, our design outcomes became isolated and closed which led to a greater probability that they would include waste.

In the pressure cooker climate of hard deadlines and product feature releases, as designers, we can be so delivery-focused that we forget to question if we are heading in the right direction. Deliberately pausing and reflecting at the end of each phase ensures that we don’t carry on along the wrong course. We will return to how reflection benefits our design framework in more detail once we’ve outlined each of the four phases that make up our framework.

Phase 1: Understand

Design process - understand

Research, explore and define

At the start of any given project, we’re typically handed a little bit of background information about the problem at hand and a whole bunch of assumptions. The initial phase is all about getting deeper into the problem space and validating or disproving some of these assumptions. There is no point diving into outcomes if we don’t holistically understand the problem first.

Some of the methods used within this phase may include:

  • Quantitative research from internal tools, such as Google Analytics and Tableau
  • Qualitative research such as user surveys, interviews and competitor research
  • A project kick off with the delivery team and key stakeholders to ensure all knowledge is on the table

By the end of this phase, we should know:

  • What the problem is that we are trying to solve
  • Who are we solving it for
  • What success looks like
  • What data we have to challenge our assumptions
  • What data we need to gather
  • Who the key stakeholders are

Phase 2: Explore

Design process - explore

Conceptualise, experiment and learn

Now that we have a better understanding of the problem, we can start to explore the solution. At this point, it isn’t about coming up with the final outcome, it’s about identifying the breadth of possibilities. This may include sketching ideas on paper as well as testing assumptions through lean UX practices.

Some of the methods may include:

  • Ideation workshops with delivery team and stakeholders
  • Pen and paper sketching
  • Design studio workshops
  • Developing paper / lo-fi prototypes
  • Early user testing prototypes and design
  • A/B testing
  • Lean UX tests

By the end of this phase, we would expect to know:

  • Which ideas and assumptions are not valid
  • Have a rough sense of the design direction we want to go in

Phase 3: Refine

Design process - refine

Iterate, validate and refine

Hopefully by now we should know the direction we want to go in, and have an understanding of what works and what doesn’t. At this point, it is all about refining our solution. As we were work in an agile environment, we continually refine the designs while validating our thinking throughout each iteration.

Some of the methods may include:

  • Mid/High level prototypes/design
  • User testing design iterations
  • Feedback workshops, stakeholder buy in

By the end of this phase, we should expect to know:

  • The various scenarios we should design for
  • The level of fidelity that designs need to be at for further validation
  • Have high confidence that engineers can implement our proposed solutions

Phase 4: Implement

Design process - implement

Review, release and test

At Envato, the design team isn’t finished with the work at the point that it has been completed to ‘pixel perfection’ and handed over to the development team. A big part of our work is to sit alongside the developers as they implement the design – there are many considerations that occur during development that could cause the outcome to shift, like unforeseen technical limitations or new scenarios identified. The job of the designer, at this stage, is to collaborate with the developer to come up with the best possible solution within any limitations.

Often developers have great design ideas too and they should always be considered. Finally, and most importantly, we want to make sure that our outcomes have the impact intended. That means measuring any post release data that can track solving the original problem.

Ultimately, we are in the problem solving space, and we want to make sure that the problem has been adequately resolved.

Some of the methods may include:

  • Collaborate and pair with team
  • Monitor key success metrics post release
  • User testing on final the outcome

By the end of this phase, we would expect to know:

  • Whether the outcome has been successful and why
  • The next direction for this project

The importance of reflection

As you can see, there are plenty of actions to take during each phase. Sometimes these can be done quickly, while other times a project may take months to go through many rounds of the framework. Because of this, it’s critical that a reflection stage is included at the end of each phase.

Questions to explore during the reflection stage include:

  • Are we aligning with the company values?
  • Are we aligning with the company vision?
  • Are we aligning with the company strategy?
  • Are we solving the right problem?
  • Will our solution deliver the right outcome?

This may seem straightforward at the start of a project, but can shift once the project begins. You may complete a phase and discover that the solution is misaligned with the company vision. At a critical juncture such as this, the stakeholders need to decide as a group whether to continue or pivot. Pivoting at the earliest possible stage means that you are always designing the right thing for the business and avoiding waste.

The flexibility to go forwards and backwards and repeat

Unlike other design processes, our framework is not linear. Phases can repeat or skip depending on the project. If you finish a phase and still don’t think your knowledge of the problem or potential outcome has increased, it might be worth repeating that phase once you’ve reflected back on where your gaps are.

And if this seems like a long process, it doesn’t have to be. A phase can be done in a half-day depending on the project, or a few weeks if you need to dig deeper. In this way, the process is adaptable to suit small and large projects alike.

Finally, as we work in an agile environment and are often iterating on the same problem, the framework might repeat itself many times throughout the lifecycle of a project. In this way, the framework can be infinite, while using reflection points as guiding lights for pivoting or pausing.

Where to now?

It’s been a huge journey for the design team to get to this stage. You can read more about how we got there Part 1: Designing the Envato design framework. But it’s not over yet. We need to make sure that the rest of the Envato business both understands and supports this framework and that it is aligned to the way they work too. We are not trying to make a dogmatic process that all other teams need to adhere to. Instead, we are trying to focus on how a great design driven framework can incorporate into an existing agile delivery approach, without ignoring the company’s goals and mission.

Because of this, the possibility of tweaking the framework over time is inevitable. Like every great design, we will continue to iterate on it, taking into consideration the way we work and how Envato evolves over time.

We would also love your thoughts on our framework! Does it make sense to you? Do you follow a design process? What would you change? What do you agree / disagree with?

By Ioanis Hristodoulou

The post Part 2: Introducing the Envato Design Framework appeared first on Envato.

]]>
Part 1: Designing The Envato Design Framework https://envato.com/blog/part-1-designing-the-envato-design-framework/ Fri, 24 Aug 2018 06:31:02 +0000 https://envato.com/?p=72091 A distributed team with a common goal Here at Envato, the Design team consists of Designers, Content Strategists and Researchers, all embedded in different product teams under the same Envato brand. As the company has grown, the Design Team has also expanded quickly, with new people regularly joining the team as new roles are created. […]

The post Part 1: Designing The Envato Design Framework appeared first on Envato.

]]>
A distributed team with a common goal

Here at Envato, the Design team consists of Designers, Content Strategists and Researchers, all embedded in different product teams under the same Envato brand. As the company has grown, the Design Team has also expanded quickly, with new people regularly joining the team as new roles are created.

As a team, we aim to deliver a consistent experience across all of our products, while also providing space for each team to innovate. Over time, however, it’s become increasingly difficult for us to follow and keep track of each other’s work, and ultimately come together as a team.

We set out to tackle this challenge by designing a collaborative and unified approach that could be shared by the whole team. In this post, we focus on the method we used to arrive at the current Envato design framework rather than describing the framework itself.

Collaborative process mapping

To move towards a shared future, we started out by getting the whole team together to talk about how we work. We had an honest and transparent discussion about the pain points we faced in the various areas we worked in and the teams we worked in, as well as the things we wanted to change.

Design team workshop

Once we had a clear idea of each individual’s working style, we paired up to ideate around an ideal way that design work could be done at Envato. To help us visualise our thinking, we applied a standard process map format, based on commonly understood definitions and symbols.

Whiteboard

A typical process was mapped out on a whiteboard, with discussion at every step.

Whiteboard with process map

Some of our discussion points included:

  • What should happen in each phase?
  • What’s the sequence of the steps? (e.g. should the team kick-off come before or after establishing a problem or goal?)
  • How do we make sure we’re solving the right problem / implementing the right solution?

At the end of the session, we had visibility on how each of the different teams and individuals worked, as well as a high level idea of where we thought we wanted to be.

Gathering feedback and iterating

Over the next couple of months, different designers would pair up to expand on the high level process with more detail in each step. We used our daily feedback sessions to gather ideas and continue iterating on the concepts.

Design process on perspex

A turning point

A few months down the track, as the process map was really coming together, we found ourselves looking at what we’d come up with and feeling a sense of accomplishment. Then came our design offsite, a major checkpoint in our journey, where we reviewed the process and identified some major flaws with the map.

It turned out that we’d been too focused on mapping out the events that happen in a generic design process, viewed from a single perspective of applying it to a ‘typical’ project. One of our designers pointed out that the process felt too linear and didn’t reflect her day-to-day work.

The process we’d designed lacked the flexibility and validation checkpoints to represent some of our real world scenarios. For example, a smaller design task such as a creating a Marketing landing page wouldn’t require the same amount of resource or scrutiny as a large project or initiative.

Back to the drawing board

After taking on board what we had learnt from the offsite, we knew that we needed to move away from the process map. As a team, we collaborated further and agreed that instead of a linear flow, taking a circular approach would make a lot more sense.

Flow chart design process

Moving away from the flow chart

We also had another major discovery, which as around putting ‘Reflection’ at the heart of our process. The design team reflects and gathers feedback often – from each other, as well as the rest of the company. It felt right to have reflection at the centre point of our approach to solving problems.

Diagram sketch design process

Some ideas sketched out by the team

Diagram sketch design framework

Iterating towards the right solution

Design framework iteration

Just as we would tackle any other design problem, we took an iterative approach to designing the process, moving from low- to high-fidelity ways of visualising our process.

Fast forward to the present day

Design Framework

We are now happy that the representation of the process clearly explains how we work and by sharing it will encourage a consistent approach to projects and more cross-team collaboration, while also allowing for flexibility, nuances, and tight deadlines! We also decided at this point that the word process did not convey a sense of flexibility so decided that framework was a more accurate description of how we worked.

What started out as a design task to explain our way of working has now become a larger conversation that involves the whole company. The conversation has only just begun, and we’ve got a lot more work to do. Watch this space.

If you’d like to learn more about how the Envato design framework works, take a look at Part 2: Introducing the Envato Design Framework.

By Jess Ng

The post Part 1: Designing The Envato Design Framework appeared first on Envato.

]]>
Getting the Most from Responsive Design https://envato.com/blog/getting-the-most-from-responsive-design/ Tue, 08 May 2018 07:16:44 +0000 https://envato.com/?p=68644 Alt Title: How to Make Responsive Design Work for Your Business Responsive design is a website design template that helps a site translate well on multiple platforms and display types. Many people check websites more frequently on their mobile devices than on their computers. Having a website that does not function well on multiple platforms […]

The post Getting the Most from Responsive Design appeared first on Envato.

]]>

Alt Title: How to Make Responsive Design Work for Your Business

Responsive design is a website design template that helps a site translate well on multiple platforms and display types. Many people check websites more frequently on their mobile devices than on their computers. Having a website that does not function well on multiple platforms can do significant damage to your business.

What Is Responsive Web Design?

The idea for responsive web design is that users should be able to effectively utilize a website from any platform. The design is created so that the website will respond and adapt to screen size, platform, and orientation. The process is made up of flexible grids and layouts, images, and expert use of CSS media queries.

The concept of responsive web design stems from the architectural idea of a room that can automatically expand or shrink using robotics and special materials, depending on how many people are in it. Responsive web design is supposed to be an online version of a self-adjusting room. It is revolutionizing web design with a whole new way of looking at online content.

Adjusting Screen Resolution

Many device settings allow you to automatically change the screen from horizontal to vertical. Ideally, the website will seamlessly adjust to the change in format. Additionally, many mobile device users do not maximize their browsers. This means that there are exponentially more screen sizes and resolutions that the website should be able to adjust to.

Part of the solution to screen resolution difficulties is flexibility. Flexible layouts are becoming more common. Currently, flexible layout allows images to adjust automatically with the platform and offers settings to prevent the layout of the website from breaking.

Fluid and elastic images and text have a massive impact on websites. Users can easily adjust the site to their liking and it will remain easy to read and use. If the image and logo of a site are resized incorrectly, the quality of the image may suffer and part of it could be cut off. The strategy is to divide the image in two and have one as the illustration in the background and one as the logo, resized proportionally.

Flexible Images

As mentioned above, flexible images are vital to web design. One of the biggest problems with current responsive web design is working with the images. There are multiple ways to attempt to work around images resizing incorrectly. One of them is the max-width rule. The maximum width of the image is set to 100% of the screen or browser’s size, connecting them in such a way that if the screen or browser changes size, the image will adjust and reduce accordingly.

Responsive Images

The responsive images technique focuses on resizing images to the size of the screen, so that they maintain high resolution and do not take up too much space on smaller devices and browsers. When the page loads, the large or small images are loaded as necessary to expedite load time.

iPhone Image Resizing

One of the great attributes of iPhones, iPads, and similar devices is that web designs have learned to shift seamlessly. Often, websites do not need to change to the mobile version to work on these devices, making them more user-friendly.

In some situations, the images still change sizes and reduce proportionally even though they were designed for the tiny screen. These adjustments often make text unreadable, even if the design was altered to cater to the smaller screen. This can be overridden with a meta tag so that images that fit the screen initially maintain their size and do not shrink.  

Custom Layout Structure

A custom layout structure is used when there is an extreme size change. There is one main style sheet that outlines the foundational qualities of the website. If the main sheet results in deformed text or images it can be detected, and a switch made to a child style sheet that copies everything from the default sheet and redefines the layout.

Media Queries

To apply specific styles to sheets, people apply media queries. The new CSS3 has introduced many new features for use in website design and in media queries. Multiple media queries can also be used on a single sheet to create a variety of adjustments.

JavaScript

JavaScript is a great option for devices that do not support all of the new CSS3 media query options. However, JavaScript also recently created a library that makes older browsers capable of supporting CSS3 media queries.

Showing or Hiding Content

Though it has become possible to shrink information and images to fit on smaller screens, sometimes it only serves to complicate the website and make it look messy. A better solution is often to pick and choose what content should be shown and what should be hidden. CSS has given designers the ability to show and hide content. It is even possible to replace pieces of content with navigation to the missing content, so that it can still be accessed. By providing navigation to the information that had to be hidden, the viewer can still access everything without being confronted by a disorganized and confusing screen in front of them.

Touchscreens and Cursors

With touchscreens rapidly taking over the screens on all but the largest devices, cursors may become a thing of the past. Many people assume that it is better to apply touchscreens to smaller devices, because a smaller screen does not warrant a cursor. However, touchscreens are now being installed on larger devices like laptops and desktops. They each come with different design guidelines and requirements, but neither is exceedingly difficult to create. Touchscreens do remove some of the functionality that comes with a cursor like the ability to hover, so the design process has to take that into account.

Qualities of Particularly Effective Responsive Web Designs

One of the greatest benefits of responsive web design is the ability of the screen layout to adjust to accommodate browser width. Instead of the components shrinking, they change position on the screen so that it remains readable.

Another effective quality of responsive web design is prioritizing information. Some websites, when resized, use the aforementioned strategy of cutting out non-essential information to their message.

Other websites organize their page into columns on regular computer screens. When opened on a smaller screen or resized, they reorganize the columns so that they can all fit on the page. However, at a certain page size, the website is designed to cut out information that is less important.

Responsive Web Design as a First Step

Responsive web design is a major improvement for the web design community. It has been beneficial to users and designers. However, it has not completely resolved issues that users have with visiting websites on various devices, or trying to view them the way they prefer. It has been developed to improve the experience. Perfecting the design remains an elusive goal. Responsive web design has opened the door to a more customized online environment, and each new customization is making websites easier to use and more pleasant to visit.

Recommended

The post Getting the Most from Responsive Design appeared first on Envato.

]]>
Why UX Writing Is a Thing Now https://envato.com/blog/why-ux-writing-is-a-thing-now/ Tue, 13 Mar 2018 02:24:43 +0000 https://envato.com/?p=67764 If you work in design, you’ve probably noticed by now the wave of “UX writer” jobs being posted online over the past couple of years. From Google to YouTube, Dropbox, Amazon and PayPal, every big tech company now has a team of UX writers. But what is UX writing? In this article, you'll find out.

The post Why UX Writing Is a Thing Now appeared first on Envato.

]]>

If you work in design, you’ve probably noticed by now the wave of “UX writer” jobs being posted online over the past couple of years. From Google to YouTube, Dropbox, Amazon and PayPal, every big tech company now has a team of UX writers.

But what is UX writing?

As John Maeda, Automattic’s head of computational design, pointed out in his 2017 Design in Tech Report, “Words are really important because the graphics don’t make sense sometimes.”

Not long after Maeda’s report came out, Fast Co Design followed up with a piece called Forget Coding: Writing Is Design’s Unicorn Skill.

But this article isn’t about why designers should learn to write better (though they certainly should!). No, it’s about why the task of UX writing shouldn’t automatically fall to designers. UX writing is a skill, particularly as English – especially for those who speak it as a second language – can take years to master.

From word choice to voice and tone, and concepts like cadence, assonance and alliteration, these are elements of English that even native speakers spend years studying at school.

So what should designers and developers do?

In this article, we’ll explore what UX writing is, how to get started finding your product’s “voice” and why getting help with UX writing is a good investment.

What Is UX Writing?

UX writing is still very much an emerging field, but as UX Booth explains:

“UX writing is the act of writing copy for user-facing touchpoints. This copy must not only embody the voice of the organization, but must also be considerate and useful for the user.”

Meanwhile, UX Planet describes UX writing as:

“… the practice of crafting copy which is directly used in user interfaces to guide users within a product and help them interact with it. The major aim of UX writing is to settle communication between users and a digital product.”

Within the discipline of UX writing, there are two different kinds:

  • Copywriting: Whether it’s the text on a 404 page or the copy on a landing page for a product, this type of UX writing tends to be punchy and/or flowery. It’s the language that gets you excited about using a product.
  • Transactional/navigational: These are the words that help guide a user through using a product. According to Dropbox UX writer John Saito, when it comes to this kind of UX writing, “The goal is to not have your words be noticed, so it becomes a seamless experience.”

The copy – i.e. words – created by UX writers is known as “microcopy.” The name refers to the small components of text which serve as prompts and hints to the user. UX writing is not the same as marketing copy, which you would commonly find on a website or in an email.

Microcopy is the interface text you see when using a product, including instructions, buttons, and error messages, as well as product tours and wizards, menus, notifications, labels, links and chatbots. Basically, all the small components of a digital product that has words.

One of the best examples of UX writing is MailChimp. If you’ve ever used this email marketing tool to send an email, you might’ve felt that twinge of anxiety a lot of people feel when they hit send.

MailChimp tackles this mini stress all too cleverly by tapping into its users’ emotions. After you hit “Send,” the success messages work to lighten the mood, congratulating you on a job well done and offering a high-five.

The MailChimp team could’ve just displayed the message “Email sent.” But pairing the animation with simple microcopy makes the process of sending emails much more of a fun task. It also sets MailChimp apart from other email marketing platforms, whose transactional copy might be far from friendly.

According to Chase Curry, a senior product designer at MailChimp, designing the Freddie high-five animation took a couple of weeks, which may seem like a lot of time to dedicate to something as simple as an in-app animation. But, he says, “For us, though, it’s details like this that remind our users who we are, and that we’re all humans.”

Finding and Documenting Your Voice

So by now you might be wondering what your product’s voice is?

It’s important to work this out and to document it, so next time you need microcopy for your product, you have a clear idea of what to write. But also, it’s helpful when reviewing and updating existing microcopy in your product.

Every product, whether it’s a WordPress theme or plugin, has a voice, and that voice might evolve slightly over time.

Most big companies have a style guide or some kind of guiding principles on what their voice and tone should sound like.

Take MailChimp (again) for instance. The email platform has a very distinct voice, which is fun, lively and young. According to the company’s style guide, Voice & Tone, their voice doesn’t change much: “…our tone adapts to our users’ feelings.”

This is typical for many companies – a basic principle of UX writing is that your voice tends to be the same throughout your products, but your tone will change depending on the scenario. For example, the tone you would use for a landing page might be welcoming, whereas the tone for an error message might be more empathetic.

Branding company Larsen outlines how to create the right brand voice in six steps:

  1. Define. Choose three words that capture the personality of the voice you want for your product/brand. Then limit those words with three more words. For example: bold, but not arrogant; irreverent, but not offensive; loud, but not obnoxious.
  2. Differentiate. Check out how your competitors communicate. What’s their voice? Their attitude? What can you learn from them and how can you distinguish your own voice?
  3. Listen. How do your customers communicate? Are they formal and serious? Or casual and conversational? It’s important to consider what kind of voice will be most appealing and authentic to your target market.
  4. Inspire. Your brand voice should be inspiring, bold, and speak directly to your target market. Use verbs and short phrases.
  5. Engage. Don’t try too hard. Let your brand voice relax and be “real.” Even the most serious companies shouldn’t shy away from having a conversational, friendly tone that has loads of personality.
  6. Evolve. Your goal shouldn’t be to create the perfect brand voice, but to create one that works for your product or brand right now. Your voice will evolve over time as your products change and as you keep pace with your target market.

Examples of Brand Voice

Let’s take a look at some examples of different companies’ voices, and how they tackle UX writing.

Google

As part of its Material Design system, Google has published a comprehensive style guide for its UX writing team, and others who might be interested in adopting their writing guidelines and techniques.

Google’s voice is clean, simple and functional. Further, the company’s style guide that: “Text should be understandable by anyone, anywhere, regardless of their culture or language.” In addition, “clear, accurate, and concise text makes interfaces more usable and builds trust.”

The guide addresses language, tone, capitalization and punctuation, and global writing, all with very clear examples.

For example, Google recommends that user interfaces should refer to the user using either “you” or “your” or “I” or “my”:

It’s also recommended that you avoid the pronoun “we”:

And always be concise – write in small, scannable segments to facilitate navigation and discovery.

Facebook

Facebook is home to one of the longest standing UX writing teams around, though they refer to them as “content strategists.” The team works closely with product designers, UX researchers, engineers, data scientists, product managers and others to “identify and synthesize people problems,” according to Natalie Shaw, a content strategist at Facebook.

“We maintain simple, straightforward and human language to talk to our community across all of our products, and to do this we get involved early on in the product design process,” Shaw writes for Medium.

While Facebook’s content strategy team doesn’t publish its style guide publicly, there’s a lot we can learn from simply browsing through Facebook pages.

Facebook’s voice is friendly, simple and conversational. For example, when you log in to your account, you’re simply asked:

Previously, the placeholder copy was, “What’s on your mind?” without the name. It’s a small addition, but the addition of your name makes the message much more personal, like Facebook is talking to your directly.

Whether you realize it or not, there’s microcopy everywhere in Facebook. One very noticeable place is at the top of the news feed when you log in, where Facebook typically places messages recognizing holidays and events:

Facebook’s content strategy team is also tasked with putting words in the virtual mouths of chatbots. Content strategist Emily Konouchi explains how she developed microcopy for Messenger after the platform was opened up to allow advertisers and developers to create bots in this insightful piece for Medium.

Dropbox

Dropbox has had a dedicated UX writing team for years now, at least since 2015. John Saito, who is prolific on Medium, shares his thoughts and ideas when it comes to UX writing for the company.

While Dropbox doesn’t share its style guide (it’s published internally in Dropbox Paper), Saito shares a sneak peek:

Like other big companies, Dropbox aims to be “straightforward, helpful, and human” in its microcopy.

For instance, a great example of how Dropbox handles transactional microcopy is in the “Personal account” section. Under “Notifications” you can update how often you receive emails. The microcopy is concise, brief, and easy to understand. There’s really no confusing what checking each of these options means:

Likewise, when you choose to cancel your account, Dropbox explains in very clear language what will happen next. It’s even accompanied by an illustration of a “pro” fish tank and smaller “basic” tank to help you understand that you’re downgrading your account.

And the button text couldn’t be clearer. But, obviously, Dropbox wants you to click the blue button and not cancel your account.

Conclusion

UX writing is well and truly a thing now and there’s no turning back. Every product and brand has a story to tell and it’s important that you are able to find the right words for your story.

If you’re a designer who wants to learn how to write better microcopy, I highly encourage you to check out Google’s Material Design guide to writing. MailChimp’s Voice & Tone guide is another great resource for learning how to write effective copy.

But if you’re part of a growing team, you might want to consider hiring – or at least contracting – a writer to help with your product UX. Your products will not only be infused with more personality, but your users will appreciate that they’re easier to use and navigate too.

Recommended

The post Why UX Writing Is a Thing Now appeared first on Envato.

]]>
An Introduction to Voice UI and Why It’s a Big Deal https://envato.com/blog/an-introduction-to-voice-ui-and-why-its-a-big-deal/ Thu, 08 Mar 2018 03:06:10 +0000 https://envato.com/?p=67547 Unless you've been living under a rock for the past year or so, it would be hard not to notice the voice UI revolution that has taken place. This means that UX designers need to meet this shift head-on in order to satisfy growing demand.

The post An Introduction to Voice UI and Why It’s a Big Deal appeared first on Envato.

]]>

Unless you’ve been living under a rock for the past year or so, it would be hard not to notice the voice UI revolution that has taken place. Sure, we’ve had Siri and Cortana on our phones for years now; but, it’s only with the introduction of Alexa and Google Home that the Voice Assistant has truly taken off. This new way of interacting with technology opens up a whole world of conversation.

Especially as it, almost inevitably, means a shift in the approach to UX design. As mainstream consumers now have the ability to speak to their devices and receive an intelligent response, companies are eager to improve their interactions. Which means that UX designers need to meet this shift head-on in order to satisfy growing demand.

New Direction? Not Quite

Many people are calling voice UI a new direction in the road of UX design. But is it? 

Since the dawn of technology, humans have sought out ways to improve on the last model. The horse and cart became the car, the telephone became the mobile phone, and so on. Each time, humans have improved to make the technology faster, more efficient and better to use.

Voice is the exact same principle, speeding up a number of processes and making for more efficient use. It removes the steps of typing, accessing a phone or computer device and even being near technology for the most part. Allowing questions to be answered, shopping to be ordered and who knows what else as the technology develops.

For this reason, we can see that voice UI design will not be a complete revolution. Simply an evolution of what is already in place.

Implications for Designers

Words matter. It’s no longer simply about a product having a cohesive layout, attractive design and usability. Now, vocabulary and the way that people use words will be key to success as a UX designer. A fact which means ditching the old faithful of lorem ipsum and actually using words from the start of a project. 

Choice of words will now, more than ever, change the customer experience. After all, voice removes the visual guides that have driven customer perception until now. Meaning that voice UX designers are now fully relying on words and phrases to drive the customer experience; a difficult pursuit at the best of times!

So, a voice designer will have to accept a new level of their job description: copywriter.

User Intent

For voice interaction to truly work a standardised set of navigation commands need to be implemented. These will need to be intuitive, of course, as people are unlikely to remember a set of commands off by heart (nor are they likely to want to remember). To do this effectively voice designers need to understand user intent from the outset.

A user’s desired action is easy to determine in a visual context. The ‘delete’ button, for example, has obviously very different meanings when it comes to a Word Document as compared to Facebook. However, a voice command of ‘delete’ on these platforms, while valid for both, could have very different results. This means that interpreting user intent is vital.

One way to get around this is to think of the user interface as another person. In their 2005 book, Wired for Speech, Stanford researchers Clifford Nass and Scott Brave argue that users interact with voice activated devices in the same way that they would interact with another human, and this is a key part of the design process. “Because humans will respond socially to voice interfaces, designers can tap into the automatic and powerful responses elicited by all voices, whether of human or machine origin, to increase liking, trust, efficiency, learning, and even buying.”

When we interact with another human, we expect feedback or a response, and this becomes part of the design process. We want to know that we’ve been understood and we want to interact with something that understands the semantic nuances of language.

Adaptability

As UX designers, now is the time to adapt and develop new best practices. There are limitations to this new medium, as animation, image and sight have been stripped from the design process completely. Telling a user to ‘click here’ no longer has meaning. That is a big deal, as the clickable link is one of the fundamental ways that we encourage and enable customers to interact with content. What then, if anything, can replace this in voice design?

When designing responses, we have to think about the limits of the average person’s attention span. Responses need to be designed in a way that condenses the practical information into a manageable chunk. When we ask for directions to a shop close to us, we want to know every step of the process. But when asking for directions to another town, walking the user through every turn in the road isn’t going to be practical.

When asking for the best route to the next town, a summary of the direction and which major road you need to be on is going to be more practical. The ability to understand user intent is always going to be the biggest challenge faced by voice assistants.

One solution has come from Google itself. They have developed an app which allows for Google home to turn voice answers into a clickable link in the app. However, before we all start running to the nearest app developers for our own versions of this, we have to ask: is it practical?

Perhaps not in the long run. Consumers will expect a truly hands-free solution, eventually. So, this method of drawing them to the screen alongside voice search won’t last. At least, not as a long-term solution. So, what is the answer?

Truth be told, it hasn’t been discovered yet. And that is why voice design matters. As a voice designer, you get to be an innovator and play a role in shaping the new technology. In an industry overflowing with supposed ‘UX masters’ that is a unique position to be in, one which will push your client’s and your business to the next level.

Overall, to ensure successful voice design, simply keep your eyes closed and pay attention to your users’ needs. This is a search method which developed rapidly in 2017, showing no signs of stopping in 2018, and UX design still hasn’t quite got to grips with it yet. Voice is gearing up to be one of the leading technology innovations of this decade; so put yourself ahead of the game sooner, rather than later.

Recommended

The post An Introduction to Voice UI and Why It’s a Big Deal appeared first on Envato.

]]>
8 UX Design Strategies That Will Stand the Test of Time https://envato.com/blog/8-ux-design-strategies-that-will-stand-the-test-of-time/ Tue, 27 Feb 2018 05:42:10 +0000 https://envato.com/?p=66194 When it comes to UX design, it seems as though there is a new rule or trend every year. With such rapid changes, you need a design strategy that will stand the test of time. This article offers exactly that.

The post 8 UX Design Strategies That Will Stand the Test of Time appeared first on Envato.

]]>

When it comes to UX design, it seems as though there is a new rule or trend every year. With such rapid changes, how can you know which strategies will stand the test of time and keep your customer experience positive for years to come? There are some strategies you should keep in your arsenal and implement with nearly every site design.

An optimized site that meets the needs of visitors can make the difference in whether or not they stay on your site. If your content isn’t optimized, about 79 percent of your site visitors will simply leave and find another site that allows them to more easily complete the task. People today have many choices in which sites they visit, so use these eight strategies to make yours the most user-friendly site possible.

1. Mobile Responsiveness Strategies

More and more people are accessing the internet with their smartphones. This means it is more important than ever that your site be mobile responsive. Mobile users are five times more likely to leave your site if it isn’t user friendly, and 96 percent of mobile users say they’ve come across sites that aren’t optimized for mobile. Making sure your site is friendly for both desktop and mobile is important if you want to keep your bounce rates low. This includes making sure images are optimized for different screen sizes.

Son Jaumell is a hotel booking service that is optimized for various screen sizes. Note how its desktop site and mobile site uses the same photo, but it is optimized for mobile and shows as a smaller image. In addition, the layout of the site changes slightly, with the navigation becoming a hamburger menu.

2. Multimedia

Visual media engages users, and is an important part of your overall UX strategy. 500 million hours of video are viewed on YouTube alone every day, and 45 percent of people watch over an hour’s worth of videos on YouTube and Facebook every week. Most people have faster internet speeds than before or watch videos on their mobile devices. Incorporating videos offers entertainment, is easy to digest and allows for sharing on social media platforms.

Faraday Future makes electric vehicles that have all the bells and whistles — think luxury automobile meets environmentally friendly. Its website features a full-screen video background. You’ll see one of its automobiles driving through streets, turning corners and the camera zooming in for a close-up of various features.

3. Content Strategy

One of the biggest pieces of the picture when it comes to user experience is the content you provide to the consumer. It is important that content has a purpose and clearly defines your goals as a brand. You also need to deliver content on a regular schedule and ensure it is easy to read and is scannable.

Trip Advisor offers content that highlights the best of the best chosen by its editors. You’ll find past and recent articles all follow a basic format. The goal as a site is to offer destination information to travelers, and these articles enhance that information, giving people ideas for their next trip.

4. Target Audiences

Businesses need to truly understand their target audiences in order to relate to them and provide the content and design that will most speak to that group. Knowing your target audience even impacts how you go about promoting your website and where. With millions of small businesses in America, if you want to get an edge over the competition, you’ll need to know the people you wish to sell to.

SpeedPro Imaging uses its knowledge of its target audience to provide an opportunity for business owners to get together. It offers facts and statistics within its invitation to join it for Small Business Saturday. SpeedPro understands that its typical customer is a small-business owner and it provides content and opportunities that speak to that group of consumers.

5. Navigation

No matter what else changes in web design, navigation remains. Navigation is a vital component that allows users to orient themselves to your site’s layout and to move around easily. There are some key things you need to keep in mind as you work on your site’s navigation. First, people expect the navigation to be near the top of the page. Second, link the logo to home. Many users click on the logo, expecting it to take them back to the landing page.

Safelite AutoGlass puts its navigation right in the header of its website. It seems to understand that the user wants to figure out how to get someone out to fix their glass as fast as possible, so they make it easy to find that information. Note how the first link on the navigation bar is for its services.

6. Aesthetics

About 94 percent of people decide whether or not they trust a website based on the design. Your website needs to look beautiful. This comes back to design basics, such as balancing positive and negative space. If the site looks like a 10-year-old designed it, then you probably need to put more work into it. While it is important to keep things simple and intuitive, you still need to use professional-looking images and layouts.

7. Contact Information

Make it easy for users to contact you to ask questions, file complaints or even just to see if you’ll respond or not. Approximately 64 percent of people want to see contact information when they land on a company website. The contact information can either be placed in the footer, some elements in the header — such as a phone number or email — or you can create a contact button and a separate page or area that contains all this information.

8. Social Sharing

Make it easy for users to share your content on social media. Emails that include social media icons have a 150 percent higher click-through rate than emails without those buttons. Adding the ability to quickly share a post to Facebook or Twitter is a must in today’s social media-driven world. Not only does it engage your site visitors, but it also introduces their friends and followers to your brand.

Create an Experience

One of the main things designers do is create an experience. As the visitor goes through your site, she should begin to understand the story of who you are as a company and what you do. There are many elements that play into creating this story, including articles, company history, images and even video. In the end, if you keep your focus on creating the best experience possible for your target audience, you can’t go wrong.

Recommended

4 Deadly Sins of UI and UX Design You Need to Avoid

It’s not wrong to say that perfection in web design is something that doesn’t really exist. But that doesn’t mean we can’t try and achieve it. Here are some commonly observed “deadly” sins of UI-UX across web world. What are they and how you can you avoid them?

The post 8 UX Design Strategies That Will Stand the Test of Time appeared first on Envato.

]]>
4 Deadly Sins of UI and UX Design You Need to Avoid https://envato.com/blog/4-sins-of-ui-and-ux-design-you-need-to-avoid/ Tue, 27 Feb 2018 03:39:42 +0000 https://envato.com/?p=66183 It’s not wrong to say that perfection in web design is something that doesn't really exist. But that doesn't mean we can't try and achieve it. Here are some commonly observed "deadly" sins of UI-UX across web world. What are they and how you can you avoid them?

The post 4 Deadly Sins of UI and UX Design You Need to Avoid appeared first on Envato.

]]>

We all know the seven deadly sins right? Pride, sloth, lust, envy, greed, gluttony, and wrath. You’re probably wondering what they have to do with UI-UX design. Well, just like the seven deadly sins, there are a number of deadly errors that plague the world of UI and UX design too. In this article we’ll go through the most common of them, and how to avoid them.

Gluttony – Cluttered Design

Gluttony refers to an excessive desire to consume more than one requires. It means a website design overloaded with a large number of unnecessary elements. It not only annoys users but also confuses them about what they should be focusing on.

When you clutter your design with too many elements and more information than needed, overwhelming users. Excessive information diverts your website visitor from converting well. It often results in them bolting from your site.

How to Avoid Gluttony in Your UI-UX Design?

It’s simple, articulate the singular goal that justified that page’s existence. What do you want the user to do? From there, edit with an iron fist. Don’t overload the page with content. Offer only the essentials. Do not expect your website visitor to do everything in a single visit. Focus on where they are in the customer journey, and what they need at that exact moment.

Envy – Blindly Copied Design

Envy means the craving for others’ traits, position, abilities, or state. It means a website design that is blindly copied from a competitor’s website. Copying is never a good idea. And when people do it in UI and UX design, they often make mistakes, or miss the elements that actually make their competitor’s site effective.

Your website design and voice should be created keeping your target audience in mind. Today’s consumers are smart and and they value getting the right solution for them and their problem. If your users feel like they’ve landed on a site that’s not providing relevant information in the right format, they will leave with a negative conception of it, and probably not come back.

How to Avoid Envy in Your UI-UX Design?

Study your buyer persona and understand who all your target audiences are. If you are in the business for a long time, this initial stage isn’t required for you. In such a case, analyze your customers and their behavior. Come up with a UI-UX design that helps your users to derive solutions for their queries.

Lust – Futile Aesthetic design

Lust is an extravagant craving for the pleasures of the body. Going for an aesthetic that pleases the eyes, is not always enough for users if the functionality isn’t there.

Too much minimalism, too much maximalism, too many animations and gifs may result in an experience that is slow loading, and lacks substance.

How to Avoid Lust in Your UI-UX Design?

Strike a balance between visuals, typography, space, and focus areas. As they say, “minimalism is best achieved when a design is reduced to only the elements that are absolutely essential for it”.

Pride – Technically Flawed Design

Pride is the sin from which all other sins arise. It is an unwanted overconfidence in one’s own capabilities that hinders the individual’s gratitude of the divine favor.

If you do things in a hurry with overconfidence, you are bound to make mistakes. Those mistakes may be the placement of CTAs, sizes of text, disproportionate folds among many other options. Remember, small mistakes can cost you big.

How to Avoid Pride in Your UI-UX Design?

While designing UI-UX, don’t see it from a designer’s point of view. Instead, see it from the user’s point of view. If you have landed on a page, what information are you looking for? How does that effect the hierarchy of information you’re presenting? For every single website you design, always start from discovery phase.

It Is Never Too Late to Learn

Almost all disorders about UI-UX design have been taken care of. Read each one of them and analyze whether you fall under the category of a sinner. Even if yes, it is never too late to correct yourself.

Recommended

The post 4 Deadly Sins of UI and UX Design You Need to Avoid appeared first on Envato.

]]>
The Best Advice for Novice Web Designers in 2018 https://envato.com/blog/best-advice-novice-web-designers/ Tue, 20 Feb 2018 03:11:06 +0000 https://envato.com/?p=66038 When you're just getting started, it's hard to know what advice to listen to, and what to ignore. Finding your footing in such a loud and polarizing industry like design is difficult. So, here's some advice to help you ease yourself in.

The post The Best Advice for Novice Web Designers in 2018 appeared first on Envato.

]]>

When you’re just getting started as a web designer, it’s hard to know what advice to listen to and what to take with a grain of salt. There are approximately 162,900 web developers in the United States, so the last thing you want to do is make an amateur mistake and lose a potential client to the competition. Here are 15 tips to help you take your web design business to the next level:

Don’t Neglect Your Own Website

Web designers can get so consumed with creating the perfect client websites that they neglect their own. This is bad, because 48 percent of consumers say a website’s design plays the top role in how they view the credibility of a business. Your website is a reflection of you as a designer. It should both show off your best design skills and offer the potential client a glimpse of what you do and do well. Show off your best work.

Speed Matters

Most people won’t wait a long time for a site to fully load, especially those on mobile devices. About 39 percent will just leave if it takes too long for images to load. Take the time to learn about how images are delivered, the speed of your own servers and the best ways to optimize images. For example, you can install a plugin that smushes your images or you can deliver images via a content delivery network (CDN). There are also cache settings that might make your site load more quickly for repeat visitors.

Stick to a Few Typefaces

You want your design to be unique and to stand out, but it is easy to get caught up in typefaces and to use quite a few to show off your design skills. However, simplicity really does work better when it comes to the fonts you use on your page. Illustrated Domain recommends limiting your fonts to a few per page, because too many different styles may put the focus on the fonts and not on your products. Multiple typefaces can also create pages that load more slowly – see No. 2 above.

Make Images Emotional

When you choose images to enhance the text on your website, you’ll want to choose images that evoke some type of emotional response. Consumers are drawn to images that make them feel something. However, the image you choose must also be relevant to the industry for which you are creating the website. This isn’t an easy task, but with a little thought, you can come up with a photo that speaks to the heart and soul of what the company does for their customers.

Get a Process in Place

When you first start working with clients, the process itself can feel overwhelming. It’s a smart idea to write out the steps needed to complete a job. You might have the initial quote, first payment, mockups of the design, approval of design, customer approval of website and final payment, for example. Your process will differ from the process other designers use. What is important is finding a balance that works for you and your clients.

Utilize Tools

Don’t be afraid to pull in tools that make your life easier as a designer. Find a good invoicing system. There are many from which to choose. You can use Square for payment and set up recurring invoicing and other features that help you keep track of your clients and payments for business and tax purposes. Use time-management tools such as Toggl to track how much time you’re spending on each task. Stay organized with digital to-do lists. The more organized you can get with the business side of design, the more time you’ll have for the creative tasks.

Choose Color Carefully

Web guru Neil Patel shares tips about the psychology behind web design and how even the colors you choose can evoke emotion. He points to how Coca-Cola uses red in its branding, from website to logo. The color shows that the brand is bold and fresh, and it works very well. You’ll have to balance the colors the company might already be using with complementary colors for the web design. The overall key is to use colors that are visually pleasing but also stand out from the crowd.

Remember the Call to Action (CTA)

Even though the marketing end of the website is probably handled by the company’s own marketing team, you still need to consider the overall user friendliness of your design. A strong landing page will feature a CTA that invites the user to take a specific action. Understanding where to place the CTA and how to draw the user’s attention to it will help your clients tremendously. The better service and value you offer your clients, the more referrals you’ll get in the future.

Start Small and Grow

About 29 percent of small businesses don’t have a website yet, so you might be working with some pretty small fish in the business pond, especially in the beginning. Don’t try to create a website the size of Amazon in the beginning. Even Amazon didn’t start out the size of Amazon. Instead, start simple and add features as the business grows and traffic to the business’s site increases.

Plan a Navigational Hierarchy

No matter what size a website is in the beginning, try to think through a hierarchy plan that allows for growth. What are the main categories for the business, and how can additional features or products the business might add at a later date be categorized? Planning a navigational hierarchy now can prevent redesign nightmares later. Hopefully you will still be designing for the company when it comes time to revamp the site, so you’ll be doing your future self a favor here.

Underpromise and Overdeliver

You’ve likely heard this saying before— it’s a popular saying in the business world. Promise your customers less than you know you’re capable of doing and then deliver more and faster than you promised. This helps ensure your reputation for going above and beyond and delivering in a timely manner. It also gives you some flex room if you run into any hiccups along the way. Designer Ryan McKay shared with Envato that you should “go the extra mile and surprise the client with something they didn’t request.”

Website Flow

Think about the pathway the typical visitor takes through your website — or the path you’d like the customer to take. How can you direct your customer where you want them to go? Do you offer multiple ways to reach the destination? Everything about your site should funnel that visitor to a destination, even if it changes over time. Make sure there aren’t any dead ends on your site. Each page should flow naturally to another.

Make Navigation Intuitive

Navigation is one area where you don’t want to get overly creative. Most site visitors expect to find the navigation bar above the fold, either near the top or the top side of the page. This is the best location, because this is where site visitors will look to get their bearings and figure out how to move through your site. If you put the navigation in a location that is difficult to find, you risk visitors bouncing away from the site.

Add Negative Space

Negative space is the hallmark of good design. If you are building a page for a client, he or she may want to fill every available inch of space with something. It is up to you as the designer to educate your client about the benefits of negative space for drawing the eye to the specific thing the business wants the visitor to look at. There needs to be a good balance between positive and negative space within any design. Negative space doesn’t always have to be white background, however. It is any type of neutral space that gives the reader’s eyes a break from the content.

Create Responsive Designs

In March 2017, over 80 percent of the top websites ranked by Alexa were mobile-adaptive sites. With more and more people using their mobile devices to get online, it only makes sense to ensure any site you design is mobile adaptive. It is easiest to create a site that is adaptive to screen size from the very beginning.

Rewarding Career

Being a web designer can be quite rewarding. You get to work with a wide variety of clients and design creative sites. However, there are many aspects of design to learn, including some basic business management and organizational skills. With a little practice and study, you’ll grow a nice client base and continue to get referrals and build your business.

Recommended

The Rules of Designing UX for Millennials

Millennials are an elusive group to capture the attention of. So, what is it they want from a user experience? How can you get them to try your product, or visit your site? And, are they really that obsessed with avocado on toast? Find out in this article.

The post The Best Advice for Novice Web Designers in 2018 appeared first on Envato.

]]>
The Rules of Designing UX for Millennials https://envato.com/blog/how-to-design-ux-for-millennials/ Wed, 14 Feb 2018 06:05:20 +0000 https://envato.com/?p=65883 Millennials are an elusive group to capture the attention of. So, what is it they want from a user experience? How can you get them to try your product, or visit your site? And, are they really that obsessed with avocado on toast? Find out in this article.

The post The Rules of Designing UX for Millennials appeared first on Envato.

]]>

Millennials are an elusive audience that every brand is courting, and every other generation has got something to say about.

Apparently they’re whiny, selfish, and will never be able to afford a house because of their relentless appetite for avocados. Yet, they’re the audience advertisers are the most desperate to reach.

So, what is it that they want from a user experience? And, with so many mediums trying to capture their attention, how can you build something that will make them come your way, and stick around?

The rules of designing for millennials

Firstly, whatever your product, it needs to adhere to these rules:

It needs to be fast

Millennials have absolutely no tolerance for things that are slow. With every brand courting them, and offering other experiences they can choose to spend their attention on, there is absolutely no chance they will stick around for an experience that doesn’t load quickly.

Optimizing your product for speed is vital. If it’s a video, consider uploading to a platform like Vimeo, or YouTube. If you’re running a publication you should be optimizing your website for Google AMP, and Facebook Instant. Anything that can make each experience they have with your product, wherever they’re coming from, fast, and satisfying puts you in a position to satisfy a millennial audience.

Mobile optimize your product

Millennials are the smartphone generation. As a millennial myself, I know I almost exclusively listen to music, listen to podcasts, use apps, read articles, and surf the web on my phone. On top of that, it’s almost always while I’m doing something else like commuting, or streaming something on another device.

If you are targeting a millennial audience, there is absolutely no excuse for not building your site to be optimized for mobile. In fact, you probably want to consider building your site first, and foremost for mobile, then adapting it for the desktop. That’s how important that platform is to this audience.

Come to terms with the fact that millennials don’t go to homepages

While Facebook’s recent algorithm changes mean there’s diminishing incentive to share to the platform for brands and publishers, it doesn’t mean millennials will be running to your homepage anytime soon.

The reality is that they’ll still usually be referred from social media, a search engine, or an aggregating service. So, it’s up to you to try and both attract them to your site, and retain them when they get there. No matter which way they get in.

If you’re a publication, autoloading the next article beneath the current one, so that they can effortlessly scroll from one to the next, is a start. Just make sure that next article is closely related to the previous one. Try, and get them to sign up to an email newsletter, so that your newest articles, or product news will be right in their inbox.

Do whatever you can to keep them around on your site, and coming back, building your rapport, and trust with them.

Don’t force them to download an app

Looking at the homepage of most people’s smartphones, it’s clear most of us don’t need any more apps.

While apps provide great advantages when it comes to controlling the user experience, and collecting user data, they’re just not something people are keen to download more of.

As mentioned in the section above, millennials are unlikely to even find your brand, and its content, anywhere other than social media, or Google. So, focus on other ways you can retain them without bombarding them with ads for your app. Or, worse, blocking them from viewing your content unless they download it.

Unless you are some sort of subscription service, do whatever you can to reduce the friction between them discovering your brand, and consuming your product.

Make your product high quality, and focused

Millennials seem like they live hectic digital lives, full of loud social media channels, and brands constantly yelling at them. And, well, they kinda do. Which is why the only things that cut through for them are high quality products with a clear focus.

There’s no shortage of sites that shamelessly try to capture clicks, rather than deliver true value. Millennials have enough options for those sorts of experiences in literally every other part of the internet. Provide what they prefer: a straightforward focus on delivering a specialized product that’s purpose built for them.

Remember, millennials want to feel special. Delivering content that feels specifically tailored to them will mean they feel like they’re getting something that gives them a unique perspective on the world that, maybe, puts them a step ahead of the next person.

Make them feel like a trendsetter.

Millennials like a lot of change in a short amount of time

Think fast fashion brands like H&M. As soon as a trend has caught on, there’s something new in the pipeline for next season.

This doesn’t mean you should be endlessly pivoting its product, or changing its design aesthetic. Rather, it means that your style guide should be clear on the fundamentals of your brand and user experience, while have built in flexibility that allows for some elements to be constantly changing.

Maybe you change the product’s color palette every few months. Or, the shape of your buttons alternates, or animates differently. Or, each of your feature articles is completely bespoke to match its topic like Bloomberg Businessweek did for many years with its cover.

Don’t get stale. We hate that.

Products that are built well for millennials

There’s a whole wave of products that have emerged over the last few years that feel really of the moment, and a good fit for millennials.

Axios.com

One site that’s built inside, and out for this generation is Axios.com.

Launched in 2017, by the founders of Politico, Axios focuses mostly on politics, and is built for the mobile age. Each article offers a snippet of less than a hundred words with a “Keep reading” button that identifies how many words are left in the article – usually somewhere from 100 – 600 more.

Each article is short, and focused, using dot points, and clever use of font weights to emphasize the most important elements of a story in a minimal amount of time.

It’s also built to be easily shareable, and be viewed on Facebook. The experience is so mobile friendly, it feels like a Newsfeed in itself. Even when you open one of the articles on Facebook, or Twitter, it’s sticky enough that you get sucked into reading another, and another, with the next article card loaded beneath, and related.

It’s a great experience.

Quartz

Quartz has always done a magnificent job of smoothly moving you from one article to the next.

It was also one of the earliest examples of a publication built for mobile inside, and out, with a clear business focus, and a well honed design identity.

Its homepage is also a shining example of how to use space in an engaging way. And, also how to deliver content on your homepage, sometimes, without another click being necessary.

Quartz App

If you are going to try to make a news app for a millennial audience, here’s how to do it well.

The Quartz App is focused on delivering the news of the day in an interactive, digestible manner.

Structured like a messaging app, it greets you, then offers you a short teaser of each story in message form. You then choose from two responses as to whether you want more, or whether you’re not interested.

With its mix of casual language, use of emoji, GIFs, and a drip by drip style of information delivery, it’s an excellent example of how to build a modern news app.

The Outline

Always a favorite of ours, The Outline, launched in 2016, takes a refreshing approach to user experience, from its design, to its content, to its advertising strategy.

Its aesthetic is challenging, and provocative, which works, because its content is also challenging, and provocative.

It’s trying to innovate with its approach to advertising on the site. It wants you to interact with the cards advertising The Chi on Showtime. But, it’s an opt-in experience. Which potentially means the metrics they measure, are more meaningful because people choose to interact.

Also, the suggested articles beneath the main one offer a glimpse of the content, but require you to press “Read more” to see the full version. Once again, not in any way trying to fool you into reading something else, thus making their metrics more meaningful.

BuzzFeed Listicles

Emulated by almost everyone, the BuzzFeed listicle is a study in a simple, but great user experience that millennials like.

The headline promises something that the content then delivers in a very straightforward way.

Each listicle item has a headline of its own, an image or GIF, and body paragraph, all designed to make you react.

With three ways to engage you within every listicle item, times that by 17, and even without reading the body of any of them, the list will probably deliver.

The Daily

New York Times’ podcast The Daily is a news program released every weekday morning, hosted by Michael Barbaro.

Generally around twenty minutes long, which, the general length of a commute, it takes a deep dive into one of the day’s stories, while highlighting the other day’s headlines.

After numerous attempts at multimedia, in podcasts, and notably in video, this has been the Times’ first breakout hit. And, a lot of it comes down to the user experience design of it.

Firstly, podcasts have a similar ability to email newsletters, in that they invite retention through subscriptions. Once a user has subscribed, they receive the content in a much more frictionless way than stumbling across it on social media, or visiting the site’s homepage, cold.

Beyond that, Times subscription or not, it’s complementary to the main written content that many will probably read later that day. It’s not reading the newspaper to you. It’s not taking a deep dive into every single story. It’s taking one story that’s already published in the newspaper, and looking at it from another angle, often interviewing the article’s author to get some insight into how the story came together.

It also helps that the host isn’t using a voice of god approach in his delivery, often synonymous with traditional newscasters. Barbaro is more of the Ira Glass school of presenter, where the language of the script is carefully aligned with the way he speaks naturally, and not unnecessarily pompous. The result of which is intimate, perfect for a podcast, a medium people usually consume alone.

Spotify

Spotify uses both visual design, and listening data to get you discovering new music.

It’s been investing a lot of resources into regularly refreshing the covers of its playlists. With that, every few months, visiting your Browse page will feel like you’re being greeted with a bunch of fresh content. It’s also playing on the fact that when we see the same things every day, they become basically invisible to us.

Discover Weekly is a rather simple, but often delightful experience that plays well into the habits of millennials.

Music is something people consume mostly while doing something else, so the ability to simply press play on a playlist, updated every Monday, put together based on what you’ve been listening to, is fantastic. And, with each track you skip, it learns that’s not something you want, and adjusts for next week’s playlist. It’s a living, breathing user experience built exclusively for you.

Google Home, Amazon Alexa, Apple HomePod

AI assistants by Google, Amazon, and Apple are being used more and more by millennials. And, now with the home versions that double as bluetooth speakers, they’re taking over.

Google’s search engine got us used to asking for what we need when we needed it. Even to the point that Featured Snippets – those cards that often pop up on a search results page with the answer you’re looking for – mean there’s less friction than ever between asking something, and getting an answer, no matter how wrong it may sometimes be.

Voice assistants take this to a new level. And, the home devices take it to the level beyond that.

Calling out a request, and getting exactly what you asked for provides a convenience, and a focus that’s never been experienced before.

It’s also changing the user experience of how people receive other content like podcasts, news, weather, and potentially so much more.

It’s still at a very early stage, but you can see it bringing things together. Imagine receiving an entire Axios breakdown of the latest Trump story through Google Home.

It’s making information digestible with interactions pretty similar to the Quartz app. Perfect for a generation who want specifically what they’re asking for, and has trouble focusing on one thing for long periods of time.

Snapchat, Instagram Stories, Google AMP Stories

 

And finally, instant video messaging has become a huge thing for millennials.

It began with Snapchat, continued with Instagram Stories, and now even Google’s getting in on the act.

Video has long been presumed to be the medium with the biggest potential in the online space. But, the realization over the years has been that there are multiple different types of video that will work for different audiences, and fit different platforms.

Short, low-fi videos that can be sent to a group of friends seems to have captivated the millennial audience. Built exclusively for the phone, this form of content takes up the full screen, when holding your handset vertically, and that has made it super engaging to the younger crowd.

Add to that the stickers, and captions you can overlay, as well as the different masks you can apply on your face, and a sensation was born that every advertiser has been trying to master.

Conclusion

In conclusion, yes, millennials are a fussy audience. But, they’re not just spending money on avocados. They’re the biggest potential money spenders for advertisers. 

But, beyond that, they’re an advanced audience, whose expectations for how the user experience of most products works will eventually become the standards of launching a product online. 

So, listen to them. Try, and figure out how to give them the digital experiences they want. Because if you figure it out for them, you’ll have figured it out for the rest of the online audience as well. 

Recommended

The post The Rules of Designing UX for Millennials appeared first on Envato.

]]>
Skeuomorphism Is Back https://envato.com/blog/skeuomorphism-is-back/ Tue, 06 Feb 2018 04:27:20 +0000 https://envato.com/?p=65715 Steve Jobs’ go-to design language - the art of digital user interface design that mimics the characteristics of real-life objects - is making a return.

The post Skeuomorphism Is Back appeared first on Envato.

]]>

That’s right. You heard me. Skeuomorphism is back.

Steve Jobs’ go-to design language – the art of digital user interface design that mimics the characteristics of real-life objects – is making a return, after being banished from most of our screens since the introduction of iOS 7.

A design trend that began as a well intentioned way to make software less daunting, had a nearly two decade run as the style of choice amongst UI designers of all stripes. But, after escalating to an obnoxious level, exemplified below in a screenshot of the iBooks app on a 2012 iPad, designers far and wide called time of death on skeuomorphic design.

Now, more than five years later, with minimalism almost ubiquitous, it appears the controversial design style may be back, albeit a little toned down than where when we last saw it.

And why shouldn’t it return? Design is a cyclical beast. What’s in one day may be out the next, and then may be back in a couple of days later.

While it may have left a bad taste in our mouth, skeuomorphism as a concept isn’t necessarily as extreme as it was in its last iteration. And, while the concept is making a comeback, it’s probably safe to assume the leather stitching of Apple’s calendar app won’t be.

Aside from the literal references to real world object fatigue, what influenced the decision for most designers to stop utilizing the skeuomorphic style, all those years ago, was how challenging it was to scale to different sizes of screen.

At a time when smartphones were growing in size, and tablets were still relatively new to the market, adapting 3D bookshelves with wooden textures to fit an iPhone app, tablet, and web browser became too challenging.

Eventually, designers pivoted to flat UI principles. And, pretty quickly, Apple itself drew a line in the sand, throwing the baby out with the bathwater with the introduction of the drastically different iOS 7.

But, looking back, it was an overcorrection.

Sure, I don’t think many of us are truly missing the overly literal mimicking of bookshelves, calculators, cd players, and Mondaine clocks. But, the principles behind skeuomorphism are still very relevant, and have gotten lumped in with the texture choices that eventually made the trend feel overbearing.

The simplest example of the principles of skeuomorphism being employed well is your computer’s desktop. Get it? Desk top? Your windows act as sheets of paper filling your desk that you move around, and layer as you like – that’s skeuomorphism.

The switches in your settings app for you to turn functions on and off – that’s skeuomorphism.

The tabs on your web browser that you use to flick from page to page – that’s skeuomorphism.

Even the buttons that are an important element of Material Design are skeuomorphism.

The principles of skeuomorphism never really went away. But, now that technology has evolved, and in some ways settled enough for us to know more or less how many screen sizes we have to design for, how high the resolution needs to be, etc, we can afford to move another inch away from an overly minimalistic approach to design, into one that brings an element of playfulness back. But, more than that, intuitiveness.

We’re all very impressed with how stunning a stark white canvas with thin black icons, and light typography can look. But, now it’s time to remind users that they can actually interact with these elements again. And with a wave of VR, and AR experiences around the corner, the return of this once ubiquitous design trend can’t come at a better time.

Here are some examples of tasteful ways skeuomorphism is creeping back into design.

Add credit card Animation by Arvin
https://dribbble.com/shots/4129490-Index-Sidebar-Animation
Index&Sidebar Animation by Arvin
Retina Video Buttons by Charles Petterson
Add to Cart Interaction by Dannniel
Yunait Email template by Made for Desktop
Finance app animation design by Gis1on
Status Dom by Keith Sereby
My team – Radio Design (RDD) by Never-stop
The Fork by Barthelemy Chalvet
A Very Skeuomorphic Switch by Eugene Cheporov
moleskine pull to open concept by Anton Kudin

If you liked that, you'll love this

The post Skeuomorphism Is Back appeared first on Envato.

]]>