Tag: ux

Make Words Your Greatest UX Weapon

UX content

That’s what Copywriters are for right? Content Strategists? Definitely! However, words are part of the user experience and at minimum, the first pass, belongs to UX Designers.

Not only do clients appreciate seeing the first look of their product with copy that isn’t in Latin, but users appreciate it too. I’ve walked out of many usability tests and realized that 4 out of 5 issues could be solved with copy edits, whether it’s misleading button text, a confusing headline or confusion during sign up. No matter the language or place, words and conversation are universal. They are our secret weapon and one of the most valuable tools in our toolbox.

Your leading H1 hero copy shouldn’t read like Shakespeare*

*exceptions may be made for a poetry based product

You can be direct, speak with human language, and still have sophistication and a brand voice.

When someone visits the hero of a landing page on a website or web app, we give them a first impression as to who we are as a company – through a combination of words, color, graphics, imagery. First impressions are extremely important, not just in social settings. They set the tone for the entire user experience. As an H1 writer, take lessons from journalism. The two clear goals when creating H1s are:

  1. The user immediately knows what the product is and offers
  2. The user engages by learning more or signing up

When you ‘Call To Action’ make the action crystal clear

CTA copy is arguably the most important copy on the page. It’s the engagement point where we ask users to buy, sign up, join a cause, etc. It takes wordsmithing and is not easy (how ironic). A CTA should have three important qualities:

  1. Honest. For example, don’t use ‘complete’ or ‘submit’ and then ask for more information. Humans feel a sense of relief when they finish something. If they’re then told they aren’t actually finished, they’re unhappy.
  2. Concise. This article is about words but the irony is that people scroll past words. They like things to be short and sweet. Use the minimal amount of words needed to help the user understand what the button beckons for.
  3. Clear. No guessing as to what the button is for. Users are much more likely to click a button if they know where it goes.
microcopy dos and donts

Use Microcopy in these 3 places to increase your product engagement

Microcopy, or small bits of copy, throughout your site or product can make or break the user experience. These bits of copy should have these 5 important qualities:

  1. Add value
  2. Don’t overpower other words and visuals on the page
  3. Flow with the brand tone and voice of the product
  4. Short and sweet, never longer than necessary
  5. Provide the user with answers and not raise more questions

1. Increase engagement by pairing icons with words

Using words with an icon is a better user experience and a more accessible design. It’s clear what the icon means and takes all of the confusion off the table. Many icons are used for multiple purposes, like the calendar icon.

UX copy dos and donts

Some icons, such as search, are commonly known. However, using words we can make the search functionality more clear. Some search queries only allow one word searches, and other more sophisticated queries (like Google) allow phrases, questions and ideas.

UX writing dos and donts

2. Take the frustration out of transactional flows

The best UX example for this is including the password rules before the user submits a password that doesn’t have a special character. However, there are more subtle ways to improve that aren’t just best practice UX. During transactional flows, users give up personal information such as emails, credit card numbers and addresses. Many people are skeptical. However, giving a simple nod to the fact that tech can be creepy can make users feel a lot more comfortable.

transactional copy email form

3. Leave no questions unanswered

Users have great expectations. Delight them by telling them what to expect next, so they don’t have to guess and get frustrated. I always joke that part of my job is mind-reading. We must guess how people will respond to the things we show them– this is how we can respond to some of those guesses.

UX writing best practices

Words are part of the process

I start every project with pen and paper – jotting down ideas. These ideas are always a combination of words and sketches dancing around each other. Just as we walk away from user testing and stakeholder reviews with a list of changes to visuals, also consider how words can elevate the design. When preparing to test, review and ultimately launch, always ask these questions:

  • Where might a user need extra help?
  • How can this be more clear?
  • What are all the points a user could become confused?
  • Where can we delight and elevate with copy?

Join the world's best designers who use UXPin.

Sign up for a free trial.

2019’s Greatest Web Design Hits – Free eBook

From layering with interactivity to bright colors, know the trends that will influence 2019… and beyond.

Is orange the new black? How much animation is too much animation? Will 2019 be the year of Euclid? Whether you want to follow the trends or stand out in the crowd, this web design eBook will give you an idea of what to expect in 2019.

Written practically for designers of every level, this hot off the press guide includes 60+ pages of solid advice and 60+ current examples. Think of it as equal parts look book and instruction manual.

For each trend, the guide explains:

  • What does the trend look and feel like?
  • Why is this trend useful?
  • How can you adapt it to your own work?

web design trends for 2019

Join the world's best designers who use UXPin.

Sign up for a free trial.

Why Data Science and UX Design Need to Become Best Buds

Data Science and UX Design

Long gone are the days when design used to rely almost solely on the creativity of designers.

Technologies are sophisticated, subsequently rendering users more demanding. UX design has been blurring the line between art and science. According to Adobe, 38% of people will stop engaging with a website if its layout or content is visually unappealing. A similar percentage of website visitors will bounce if images take ages to load.

Enter data science to help you avoid death by bad, unintuitive design.

Eliminate educated guessing  

Successfully executed UX design has a strong scientific basis. You must make informed decisions. So before you start designing, it’s essential to go through 6 steps that mimic the scientific method:

  • Ask a question
  • Do research
  • Develop a hypothesis
  • Run experiments
  • Analyze your findings
  • Make an informed decision and implement it

Never throw darts in the dark and make assumptions on what will get website visitors to stay longer and convert. There’s a sea of information for you to dive into and find what you need. The problem, however, isn’t to collect all that vast data on user preferences. It’s to process and analyze it in a systematic manner to provide you with ready-to-use insights.

Unrightfully neglected by UXers, Google Analytics (GA) can make your life easier. This free tool helps you learn valuable information about visitors: what they’re doing and looking for on your website, where they come from, how much time they spend on each page, whether they engage with certain content, or whether mobile visitors behave differently than desktop visitors, among many other things.

How to make the most of Google Analytics:

Optimize your Bounce Rates

Assess which pages have the best and worst bounce rates. Apart from allowing you to access the report for each individual page, GA offers analyzing your landing pages and establishing the sources from which visitors enter your website.

Improve your Average Time on Page metrics

As the name suggests, this report shows you how much time a visitor spends on a particular page engaging with content. A lower average time indicates that visitors don’t react to your content particularly well, especially if that page features a lengthy blog post. This is a sign to optimize it. In certain cases though, a visitor quickly leaving means they easily found the information they were looking for.

Get to the bottom of Device Usage

This is a metric that has become increasingly important over recent years. Bear in mind that mobile traffic is expected to grow 7-fold from 2016 to 2021, according to the Cisco Mobile Forecast! With this report, find out how your visitors access your website. If you notice that your mobile sessions are extremely short, then fix things and take a multi-device friendly approach.

Obtain insight into Demographics

Gender, age, interests, level of education, income, location, and other information are crucial to understand the requirements of your target audience and their preferences when it comes to user experience and satisfaction.

Data Science + UX Design = More Conversions

Based on relevant metrics, you can build a website with UX design capable of capturing visitors’ attention and prompting them to fill the form or make a purchase. By having access to a huge volume of processed data, you’ll be able to pinpoint what exactly to do to make your design appealing and functional.

Fine-tune your layout

A/B testing has long been the most effective way to determine the performance of each element on your web page. However, this hit-and-miss method is time-consuming. Hence, a dynamic website design with adapts based on visitors’ interactions is the way to go. Heat map analysis is another tactic to boost conversions. By monitoring the eye or mouse cursor movement, you can get an idea about what colors, fonts, buttons, or types of content make your visitors tick. Since this can be pretty challenging, check out the works of acclaimed agencies specializing in web design to pick up some tricks of the trade.

Polish your content

As you know, content still reigns supreme. However, it won’t do much if visitors can’t locate a useful piece on their topic of interest. That’s why a search box is a must. This tiny element not only helps your visitors navigate your website easily, but also sheds a light on whether the results people get correspond with what they’re searching for. As a result, you can make your content more valuable and meet their expectations.

Personalize your website

Relevant visitor data is crucial for tailoring your content and giving each visitor a unique and personalized experience. The point is to avoid one-size-fits-all messaging and addressing your target audience in a bland, generic manner. Instead, connect with them on a deeper, more personal level by displaying adaptive CTAs, messages, or visuals. With segmentation, you can target different audience groups with suitable messaging and imagery, and avoid the redundant information they don’t care for.

Analyze your traffic

New leads are the lifeblood of every business. In order to understand how to optimize lead generation process, you need to identify what the most effective methods are and insist on them. Evaluate every acquisition channel and leverage those which bring the most qualified traffic. Spying on your competitors is another way to steal some of their thunder and copycat their successful tactics for your own benefit.

Maximizing Your Data’s Value

Insanity is doing the same thing over and over again and expecting different results.

This quote, mistakenly attributed to Albert Einstein, perfectly sums up the importance of trying a variety of things to create the best UX design. Sometimes a seemingly small and irrelevant change can make all the difference.

A few things to bear in mind when you’re assessing your data:

A/A testing is as equally useful as A/B testing

It’s used to prevent a false positive result which occurs due to an error in data reporting. False positives account for a whopping 80% of all A/B test results. But, if you show two random groups the same landing page or CTA, instead of two different variations, you can ensure the quality of execution as well as of your analysis tool.

Watch out for a novelty effect

Sometimes, the early performance of a redesigned website might show a sharp upward trend. Not because of the improved UX design, but because of the interest in its changed appearance. This quickly wears off, and you’re presented with a more realistic situation.

Beware of Twyman’s law

It can mislead you into believing that an interesting and unusual stat is correct. This glitch can be the result of a certain bias, data errors, or even bad design or test circumstances.

The instrumentation effect is another threat to the validity of your UX design research

This occurs if you change the instrument, observers, or measurement device during the process. So, make sure that your experiment is tested before it goes live. This means that you should use different browsers, devices, and an extra pair of eyes to help you prevent any issues.

In conclusion, data science can be vital to the success of your UX design. It holds the key to your visitors’ behavior and expectations, but you must learn to use it and be aware of its potential pitfalls.

Join the world's best designers who use UXPin.

Sign up for a free trial.

8 Years on the Design Tools Market, 5 Lessons Learned

UXPin’s 8th birthday this month brought on some deeply nostalgic memories.

Eight years on the design tools market has given us a pretty broad perspective. We’ve seen trends come and go, big companies enter the market and leave, companies with lots of capital doing nearly nothing and small players out–innovating everyone. One could write endlessly about it. I don’t want to bore you, so instead I’ve boiled it down to five specific lessons.

1. Being right is not enough. You have to be right at the right time.

Timing is everything. We’ve experienced it all — we’ve been too early, too late and exactly on time. Only the last group of events strongly benefits business.

Examples of being too early

The first version of UXPin had a flawless real–time collaboration (multiple people editing one design mockup simultaneously. We called it multiplayer design) in… 2011. No-one really cared about it for the first 5 years of UXPin. Only with the growth of design organizations and the expansion of remote work did real–time collaboration become truly important.

Eventually we stopped believing in multiplayer design; and this feature completely disappeared from our communication (but not from our product!). Then, a competitor announced it like it was new. Not an unrecoverable loss, but still a loss.

Another feature of our 2011 UXPin (since cancelled) was the ability to turn paper prototypes into… HTML–based prototypes. Yes. We had a technology able to transform paper prototypes into HTML… in 2011.

UXPin in early 2012.

 

It was a powerful marketing machine, but with little real–life usage, we ultimately killed it in 2013. Now, 7 years later, similar products are reappearing on the market as an applauded innovation; it seems that folks are more willing to experiment with its value in real design processes. We were way, way too early.

Examples of being spot on

Back in 2015, interest grew in solutions to help organizations scale design processes without making the whole system more disjointed. The market of tools seemed almost completely empty, and customers were desperately trying to build their own solutions. We moved fast and announced Design Systems as part of UXPin before significant competitors could. First mover advantage helped us establish a solid presence on the enterprise market.

UXPin Design Systems. We were right on time!

 

Additionally, just two weeks ago, we launched “expressions”, a feature that exposes JavaScript methods in a design tool in a friendly way — similar to Excel formulas. Expressions allow designers to create interactive prototypes with accurate simulations of, for example, form validation, eCommerce shopping carts or sign–up/sign–in flow… basically anything that is possible on the web can be accurately prototyped in UXPin.

Prototype created entirely in UXPin. Real validation and recognition of type of a credit card.

 

A few years ago this feature would have been rejected in the divisive discussion, “Should designers code?” Nothing like that happened after the launch of expressions. On the contrary — the feedback was enthusiastic and we’re seeing amazing traction among both coding and non–coding designers.

2. Only achieving critical mass of value lets you escape the market’s gravity.

Sometimes it feels like a new design tool emerges every other week. After a couple of days of excitement on the market, the tool starts to fade away. 12 to 18 months later? No signs of any development.

Why?

Design tools are complicated. Hundreds of small features must exist for mass adoption of the product. Even the biggest players with the deepest pockets stumbled on this very problem, launching premature tools that, after initial excitement, got flooded with negative feedback. When folks don’t use your tool even though it’s available for free, you know something’s not working well.

UXPin minimalistic design in light and dark mode. Designed in early 2014. Introduced in 2015. Apparently later it inspired all the other design tools on the market 🤪.

 

I remember how surprised I was back in 2012, when some users said that they wouldn’t use UXPin until we have all the “alignment” features. As a designer, I’ve always preferred snapping and smartguides, so I didn’t see automatic alignment of elements as a key feature. And yet, to many users, it was imperative.

It took us nearly 6 years to really cover all the missing features in the product.

In the form of astrophysical paradox — a design tool only gains enough speed to escape the market’s gravity when said tool achieves the critical mass of value.

Basically, a few cool features are often enough to generate buzz, but not enough to make people switch the tool.

3. People switch tools when the perceived value is greater than the perceived cost of the switch.

Switching tools is never entirely painless. Old habits die hard; the feeling of comfort can anchor somebody to their old tool for a long time, even if (objectively) it stopped making sense quite a while ago.

And yet that anchor can be eliminated. If the perceived value exceeds the perceived cost of the switch, old habits are quickly replaced by excitement.

We see it constantly. Someone talks to us reluctantly and with a speech about the merits of their current tool. Ten minutes later, they want to strategize on how to move forward. The value of the product has to be proven, and once it is, the obstacles to growth disappear.

PayPal runs their design process in UXPin. Our customers are the best!

 

That said — a key moment in UXPin’s path to becoming a leader on the enterprise market was introduction of solid account management and professional services. We offer personalized help in switching from any other tool to ours.

4. Designers and engineers are ready to ditch the image–based design tool paradigm.

When working on the first software version of UXPin, we knew that in order to one day realize our mission of merging design and engineering into one unified process, we cannot follow other design tools. We couldn’t create yet another vector tool.

Vectors keep designer in the world of completely different constraints than engineers, and it’s the tip of an iceberg of problems of siloed design and engineering processes. Different visualization during the rendering process, lack of states of elements and component–level interactions in a design tool, no way to truly test highly dynamic products… the list goes on and on. Vectors were just never created to support dynamic interfaces and hence, cannot serve modern processes.

We needed to create a tool that’s fundamentally different — one that, without falling into traps of Dreamweaver and such, will have a code–based rendering engine.

Yes, UXPin, in basic design actions, may look and behave like our vector competitors. However, whenever you draw something on the screen — we build HTML and CSS behind it. When you add interactions — we create JavaScript. The goal is not to create production-ready code, it’s to keep you within the constraints of real development, while providing the realistic environment for ultra–interactive prototyping. HTML/CSS and JavaScript are all responsible for the magic of UXPin’s accurate rendering, conditional interactions, state-based animations or powerful expressions.

One after another copies of Sketch were gaining some market excitement (rarely traction) and we were wrestling with the browser and complex code.

Things started to change though. With the growth of design’s importance in software development, growth of design organizations and a constant expansion of agile methodologies, companies started to look for tools that scale with the entire product development. Those cannot be based on vectors. After all, vectors push designers to the corner of artists and engineers to the opposite one of builders. This rivalry is not the way to scale anything.

Suddenly, everyone wants a code–based tool. It just so so happens that… this is exactly what we have.

In the last 12 months, you might have noticed that we’re talking way more about our code–based nature on the market and we’re launching more and more features that take advantage of our paradigm. The best part is… those features cannot be recreated any vector tools. We’re escaping the crowd.

Among those unfeasible-for-vector-tools features is UXPin Merge — our technology that imports production React.js components to UXPin’s design editor. All data and interactions included! Merge is currently in private alpha and soon is going to be available to the general public. We could not be more excited. Watch a recording of our webinar held on December 6th.

5. Stick to your mission.

Finally, if you believe in something — stick to it. Eight years ago, there were many temptations to turn UXPin into something completely different. But we stubbornly decided to stick to our original mission of merging design and engineering into one, unified process of software development.

While more than once it seemed crazy, it paid off to be consistent.

Here’s to another 8 years of UXPin! Thank you all for your constant support. We wouldn’t be here without you!

 

This article was originally published here on Medium.

Reflections on UXPin’s 8th Birthday

On November 11th, UXPin turned eight!

Time flies! In 2010 I was 24, working as a UX Manager at a thriving Polish eCommerce company and, after several unsuccessful attempts to start a tech business (the youthful energy!), I took a break from any serious side projects. However, I still wanted to channel my energy towards something productive; 9 to 5 was never really an option for me. Instead of pursuing dreams of a tech breakthrough, I decided to team up with two friends and enjoy exploring the problem that bothered us for years — design — engineering collaboration. Without any business goals in mind, we started to think about helping designers and engineers work better together. The problem was very close to our hearts, we just didn’t know what the solution could be.

Freed from the constraints of a firm idea, we considered multiple options. A workshop or conference? A book? Some sort of software? Physical product? We casted a wide net.

After couple of months of creative explorations, we settled on the idea of… a paper prototyping notepad.

We believed that if designers and engineers could use the same tool, they could find the common ground for collaboration. Paper seemed to be the solid foundation for what we wanted to accomplish. After all, everyone is familiar with paper and can use it for creative purposes. The only issue? Not everyone can draw. Somebody who isn’t comfortable sketching will likely be terrified of sketching in front of others. We decided to eliminate this fear by providing designers and engineers with a set of predefined, generic user interface elements printed on sticky notes. Instead of drawing interfaces you could simply pin (yes! This is why we’re called UXPin!) elements to paper. Anyone can do it!

Early visualization of the first UXPin product. November 2010.

Fast forward a couple of months of prototyping and testing our tool, searching for the right manufacturer and waiting for the production to finish — on November 10th (one day ahead of schedule!) we were ready to launch UXPin!

Well… almost ready.

The one thing that we were missing was our… website. Ridiculous, taking into account that, in this entire project, building a website was the one thing that we felt really comfortable doing. We had no experience building physical products, but building a website? We certainly knew how to do that. And perhaps that’s why we left it at the very bottom of our list of tasks. To launch on 11th, we had to fix this mistake… and fast.

On November 10th we pulled a true all–nighter. We started designing and coding after our full–time jobs and finished at 4am. The first version of uxpin.com was the most impromptu thing that we’ve ever created. Once the website was ready, we had to wait until sunrise to take pictures of our notepads. After all, people had to see the product! I remember moving my desk as close to the window as possible to catch the first beams of sun. We were exhausted.

The original UXPin Website. November 11th 2010.

After all this hard work, our approach to the launch was as simplistic as it was anticlimactic. We announced UXPin on Twitter.

Our marketing was unbeatable 😎 . First tweet about UXPin.

We got our first order 2 minutes later. Another followed 5 minutes later… 48 hours in and we were completely sold out, deprived of sleep (massive adrenaline rush!) and unsure what actually happened (and how!). Over 400 notepads sold in 48 hours in dozens of countries. UXPin became the talk of the design town.

First UXPin pictures. Definitely worth waiting for the sun!

Some months later, All Things Digital — A Wall Street Journal tech publication, published an article about UXPin (likely the first “startup” from Poland covered by WSJ). A year later, we had turned our notepad into a SaaS application and raised our first round of funding. Soon, awards for the best startup in Central and Eastern Europe and even MIT 30 under 30 statuses followed. There was a rapid growth in number of designers and engineers using UXPin all over the world. This led to the decision to move part our business to Silicon Valley and learn to take this unexpected success even further. After months of fundraising we became one of the first Polish companies to raise capital in Silicon Valley and established our second office in Mountain View.

The legend of the web — Chris Messina was an early adopter.

Much growth, many changes, successes and failures later… here we are today. Almost everything is different. Design is more important than ever and UXPin is among the leaders in the design tools market. Thousands of companies, including world leaders of tech, automotive, finance and entertainment, rely on our platform.

One thing did not change, however: we’re still on the mission to merge design and engineering into one, unified, product development process.The task that emerged from our passions in 2010 pushes us to innovate still, 8 years later. We’re chasing the ideal software production process and that may never change. Perfection is impossible to reach, but always worth fighting for. That’s why our mission is so broad and ambitious — to push us beyond the limits of our abilities and discourage ever slowing down.

One thing did not change, however: we’re still on the mission to merge design and engineering into one, unified, product development process.

These past 8 years were nothing short of amazing. We met and teamed up with some exceptional folks (our first engineers are still with us!) and stormed through both joy and pain — always getting stronger. The experience of maturing together with your team, product and market is something that I’m going to be forever grateful for. Thank you!


Our exceptional team is always at your service! This article was originally published on Medium here.

Join the world's best designers who use UXPin.

Sign up for a free trial.

Priority Matrix: The value of a unique UX

By Pablo Diaz-Gutierrez

Priority matrix - plan differently

President Dwight D. Eisenhower once said

“What is important is seldom urgent, and what is urgent is seldom important.”

It seems obvious if you think about it. And yet, in this age of information overflow, I bet you are also guilty of task management by email: A new message from a customer, your boss or a coworker often makes you turn your priorities on their head. That little red number telling you how many unread messages you have is so hard to ignore. It’s just human nature, we are wired to pay attention to things that change unexpectedly. We don’t even realize that we are trapped in multi-tasking and the illusion of work.

This problem is so common that several authors have built successful careers on helping people deal with it. Many of them draw, with credit for it or not, from the so-called Eisenhower Matrix. The goal of this method (described in his diaries) is to classify everything you have to do into a 2×2 matrix, where critical (important) things go on the top half, and immediate (urgent) things go on the left side. This way, everything we have to do falls into one of four categories:

  • Critical AND Immediate: Do this now, it’s an emergency
  • Critical: Spend most of your time and effort on these tasks
  • Immediate (but not critical): If you can delegate this to someone else, do so
  • Everything else: Stuff that falls here doesn’t deserve your time

Priority Matrix - four quadrants

At Appfluence, we develop a suite of tools called Priority Matrix. This post describes the design decisions we made early in the development process when we were still trying to figure things out. It used to be that developers working on a new tool would have to start from the bottom up, developing low-level UI elements that, when put together, would bring their products to life. Today, modern development tools and powerful frameworks have come a long way. Creating a full, polished product is now easier and faster than it ever was. But this convenience came at the cost of suffocating nearly all originality in user interfaces. When presented with the task of designing the Priority Matrix, we decided to do the right thing and deliver a pleasant, unique experience that serves our users well.

One way to think about design choices is in terms of a spectrum of possibilities that ranges from hastily putting off-the-shelf components together, all the way to developing complete UI elements from scratch. The former has been done time and time again, and the results are invariably unsurprising. Software outsourcing houses churn examples by the dozen, and they don’t make a blip on anyone’s radar because they’re more of the same. The latter, on the other hand, requires a lot more effort, dedication, and frustration until you get it right, if you ever do. But if you succeed, the result is a unique, well-fitting UX that your users will hopefully love. We went that way, and after iterating several times, we settled on a design that made us happy.

The first and most obvious decision to make was how to implement the four quadrants. Our original constraints were the following:

  1. Each version had to feel native to the platform, to differentiate from quick ports
  2. The UI had to be touch-friendly since our first release was for the iPad
  3. The quadrants had to be resizable by the user to focus on one section, or else we would waste a lot of screen real estate

Given the task to design a 2×2 matrix, the quick, first approach would be to show some buttons to maximize each quadrant, to reassign items across quadrants, and to change projects. We did this as a proof of concept, and it felt clunky. As it didn’t fit our requirements, we moved on. The next iteration would allow the user to drag the edges between each quadrant in order to resize them as needed, horizontally or vertically. This was an improvement over the first attempt, but it still didn’t feel native on the iPad: It was like a Windows app ported to a tablet interface. Also, in order to be usable at all, the edges had to be pretty wide, in order to allow the user to drag correctly. This would also have made us waste a lot of space, which we couldn’t afford on a smartphone or tablet version.

After much sketching, head-scratching and contemplation, one of us (I can’t remember exactly who) proposed having a central button that users could drag to resize the four quadrants at once. That was just right. Even though this was a non-standard UI element, users were able to identify the functionality at first sight (the icon helps with that). Because it’s just one button, we could easily afford to give it sufficient space to be easy to drag. And best of all, it is just fun to use. Even this long after we first released the app (it came out on day 1 of the iPad era), we still turn heads when we demo this particular feature. In retrospect, we wouldn’t do it all the time, but the effort we put into carefully designing from scratch paid off in scores.

Priority matrix screenshot

Priority matrix screenshot 2

The resizable quadrants are the signature element of the Priority Matrix interface. But the same careful, iterative design process was used to come up with other interactive elements. For example, items can be rearranged (re-prioritized) by holding a finger on the item and dragging it from one quadrant to another. We did this because we felt that the default iOS table reordering gestures were a bit clunky when working with multiple tables side by side. In addition, the iPad version of the app exploits the device’s multi-touch capability beyond the standard pinch and swipe operations. When dragging an item with one finger, a second finger can be used to change projects, reassigning the item to a different context. Little things like these makeup complete user experience. It pays off to step back and think through every now and then.

The design approach we propose here is not for everyone, every time. It is time-consuming, demanding and uncertain. However, as we said before when it works, the results speak for themselves. As mobile, tablet and web development frameworks evolve, it will become increasingly clear which UI and UX conventions stick and which ones are phased out. Until then, I recommend that you set clear goals and take a chance to explore the possibilities that your platform offers. Just don’t be a copycat.

Author:
Pablo Diaz-Gutierrez is a co-founder at Appfluence. They make Priority Matrix, a simple and effective task management software tool for busy people. Pablo is interested in all things productivity, and he would love helping you go home on time to enjoy the simple pleasures in life.

What UX Designers Can Teach Marketers About Visual Storytelling

By Danny Groner

Fashion portrait by Evgeniya Porechenskaya
Fashion portrait by Evgeniya Porechenskaya

UX designers work hard to make the pages brighter and easier to navigate for everyone. But one thing that some companies may lose if they overlook the importance of their design team is the expertise that their UX team has in actually selling products or services. In short, they put on more than a pretty face.

Executives should learn to welcome the design team into discussions about campaigns, advertisements, and messaging, as the UX team can contribute thoughtful suggestions about how typical people react. They’re the ones at a company most directly in touch with the research and information that guides a team courting new business or keeping existing clients happy. Here are a few thoughts on how businesspeople and other marketers can take advantage of UX design principles.

One of the core principles of UX design is crafting a natural flow for users to discover their desired results by following a clear and simple path of interaction. Marketers would be wise to follow suit. Designers know that the best way to court and keep people is by telling a compelling and addictive story. Why not try to do the same with your marketing materials? Start with your desired user outcome (i.e. a form signup, login success, or some other interaction) and work your way back. How can you get someone to engage with the process long enough that they’ll stick around to hear your pitch, or to register to hear more about your company?

The first rule is that familiarity breeds comfort. When people see someone or something they recognize they’ll feel calmer and less skeptical. This especially holds true with people – we instinctively react with greater familiarity and comfort when there is a person involved – we’re also much better at information retention when a person is involved in the transmitting of the information. In visual storytelling, if the same person appears throughout your communication, it’s a much more consistent way to reinforce your messaging.

Start telling a more human story with your pitches. Shutterstock now offers a “Search by model” feature that makes it easy.

Shutterstock same model feature

Here are five ways this feature will get your marketing team thinking more like designers:

1. Powerpoint presentations.

As you turn research and data into slides, you might consider brightening them up with some graphics. Having the same model appear on each slide, posing in different ways and calling attention to the relevant information, is a great way to keep people focused. Visual aids come in handy, but adding a familiar assistant will go that much further.

2. Travel brochures.

When booking tickets and making itineraries for our vacation getaways, it’s useful for us to see someone in the pictures enjoying the sun, nightlife, or other perks. We imagine ourselves in that spot, and it becomes an emotional experience from the get go; we grow to crave that time away even more. A smiling model appearing in different locations and hot spots will act as a personalized travel agent walking potential customers through the amenities on hand.

3. Educational worksheets.

If you’ve ever attended a daylong workshop or continuing ed course, it’s a reminder that sitting through classroom time can still be a drag, even as adults. Course instructors can borrow a lesson from elementary school teachers in this way and spice up their worksheets with a Mavis Beacon-like presence, courtesy of a stock model in the margins. It’ll help reinforce the material for more visually-oriented students and keep things interesting.

4. Article series.

Website editors occasionally report on the same subject at some length, and using a model to illustrate each article in the series is an effective way to demonstrate that they are meant to be tied, or read, together. For instance, if you were covering the ways that different social media platforms influence our decision-making, you could have the model at the top of each article demonstrate different emotions related to the various platforms.

5. Product how-to guides.

When unveiling a new product or feature, it’s often best to do so with an assistant to outline, explain, and showcase it at work. The narrative you hope to develop in the introduction is greatly enhanced – and this is particularly true online – by an assistant who appears on screen to show off the ins and outs of the system. Even if the terrain is new to them, if the graphics are compelling enough, people will flock to the next page in hopes of learning more.

Author:
Danny Groner is the outreach manager at Shutterstock.