© 2013 - 2020, Geopay.me Inc

10 Small Design Mistakes We Still Make

• Design, Small
10-small-design-mistakes-we-still-make

The saying that “good design is obvious” is pretty damn old, and I am sure it took different shapes in the previous centuries. It referred to good food, music, architecture, clothes, philosophy and everything else.

We forget that the human mind changes slowly, and the knowledge you have about human behaviour will not go old for at least 50 years or so. To make it easy for you, we need to keep consistent with a couple of principles that will remind us of how to design great products. We should be told at least once a month about these small principles until we live and breathe good design.

The human brain’s capacity doesn’t change from one year to the next, so the insights from studying human behaviour have a very long shelf life. What was difficult for user twenty years ago continues to be difficult today — J. Nielsen

Revisiting: Don’t Make Me Think

Steve Krug laid out some useful principles back in 2000, after the dot-com boom which are still valuable and relevant nowadays. Even after his revised version, nothing changed. Yes, you will tell me that the looks are more modern and the websites are more organised and advanced (no more flash!). But what I mean about that is — nothing has changed in human behaviour. We will always want the principle “don’t make me think” applied to any type of product we interact (whether it is a microwave, tv, smartphone or car).

1. We don’t read, we scan

The reason for that is — we are on a mission, and we only look for the thing that interests us. For example, I rarely remember myself going through all the text on the homepage of a product website. Why? Because most of the web users are trying to get something done, and done quickly. We do not have time to read more than necessary. And we still put a lot of text because we think people need to know that. Or as some designers say: “it adds to the experience”.

  • Use plenty of headings — they tell you what each section is about or if they are relevant to the person. Either way, they help you decide to scan further or leave the website
  • Keep paragraphs short — long paragraphs makes it harder for readers to keep their place, and they are harder to scan than a series of short paragraphs. There’s always a reasonable place in a paragraphs to break it in two.
  • Use bulleted lists — almost anything can be a bullet list. Do you have a sentence that separates many things with comma? Then it can be a bullet list. Also, don’t forget to leave space between bullet list rows for optimal reading. Take Medium as an example.
  • Highlight key terms — much of page scanning process consists of looking for keywords and phrases. Formatting the most important one in bold, makes them easier to find. Also, don’t highlight too many things because it will lose effectiveness.

2. Create effective visual hierarchies

Another important aspect that will help scanning a page is offering a proper visual hierarchy. We have to make it clear that the appearance on a page portrays the relationship between elements. So there are a couple of principles for that:

  • The more important something is, the more prominent it is. The most important stuff are either larger or bolder in distinctive colour set.
  • Things that are related logically, are related visually. For example things are similar by grouping them under the same visual style, or under the same heading.

3. Don’t reinvent the wheel

We believe that people want something new and more. But we forget that there are so many applications on the market that each demands our time. Each of them has different interactions, and we need to learn each one of them. And our mind blows up when: “Oh man, another app to learn?!”.

It is an important point to know before I am going to say this:

We as designers, when asked to design something new, have a temptation to try and reinvent the wheel. Because doing something like everyone else seems somehow wrong. We have been hired to do something different. Not to mention that the industry rarely offers awards and praises for designing something that has “the best use of conventions”.

Before reinventing the wheel, you have to understand the value (time, effort, knowledge) that went into what you are trying to disrupt and innovate.

4. Product instructions must die

Our job is to make stuff clear and obvious. If obvious is not an option, then at least self-explanatory. The main thing you need to know about instructions is that nobody is going to read them. We should aim for removing the instructions to make everything self-explanatory. But when they are necessary, cut as much as possible. (but, really, nobody is going to read them). We muddle through.

If it is not obvious then we should aim for self-explanatory.

Take IKEA as an example. If you gave an average person to assemble a wardrobe from IKEA, I am sure that he will assemble it right most of the times. Why? It is, most of the cases, apparent on how it should be assembled if we have a clear picture in front of us. But even in instances where they look at the instructions, there are no words — only images.

5. We do not care how your product works

For most of the people, it is not essential to know or understand how your product works. Not because they are not intelligent, but merely because they do not care. So once they nail down the use of your product, they will rarely switch to something else.

Let’s take as an example the Apple AirPods. We can all admit that they are the worst sounding earbuds for the price you pay. But when I look at how people interact with it, I understand the real reason why they buy it. They do not make you think about why it is not working. You even don’t notice they have new technology.

I look at how my mom interacts with them, and she never asked me what technology is behind or how they work. She knows that whenever you open the case near your device, it is going to connect. It is that easy.

6. People don’t look for ‘subtle cues’ – we are in a hurry

My favourite one. We, designers, love giving the users subtle effects and add beautiful delights. Right? Well, what if I told you that your users don’t care about it? No matter how much they tell you they do, they don’t. First time? Yes. Second? Ok. Third? Really, how much do I have to see this until it’s enough?

Why is this happening? Life is a much more stressful and demanding environment than an app’s delights and subtle effects. For example, you are a father, and your kid is screaming because he wants ice cream, the dog is barking because somebody is calling at the front door and you are trying to book a quick train ticket that should leave in 40 minutes. In that specific moment, people will not give a f* about your subtle cues. On the other side, we should use them, but not when it kills the user flow.

7. Focus groups are not usability tests

Focus group is a small group of people that sit around at the table and discuss things. They talk about their opinions about the product, past experiences, their feelings and reactions to new concepts. Focus groups are great for determining what your audience wants.

A usability test is about watching one person at a time trying to use something (your product in this case). In this case, you ask them to perform specific actions to see if you need to fix something in your concepts. So focus groups is about listening and usability tests are about watching.

8. We allow personal feelings take over the process

All of us who design digital products have the moment when they say — “I am a user too, so I know what is good or bad.” And because of that, we tend to have strong feelings about what we like and don’t.

We enjoy using products with ______, or we think that _____ is a big pain. And when we work on a team it tends to be hard to check those feelings at the door. The result is a room full of people with strong personal feelings on what it takes to design a great product. We tend to think that most of the users are like us.

9. You ask the wrong questions

It is not productive and will not add any value if you ask questions such as: “Do people like drop-down menus?”. The right question to ask is: “Does this drop-down menu, with these words, in this context, on this page create a good experience for people who are likely to use the site?”

We should leave aside “do people like it?” and get deeper into the strategic context of design.

The reason for that is if we focus on what people like, we will lose focus and energy. Usability testing will erase any “likes” and show you what needs to be done.

10. When a person uses your product, you forget that they shouldn’t spend time thinking about . . .

  • Where am I?
  • Where should I begin?
  • Where the f* did they put _____ ?
  • What are the most important things on this page?
  • Why did they call it that way?
  • Is that an ad or part of the site?

The point is that every question that pops into our head, when using your product, only adds up to the cognitive workload. It distracts our attention from “why I am here” and “what I need to do”. And as a rule, people don’t enjoy solving puzzles when they merely want to know if that button is clickable or not.

And every time you make a user tap on something that does not work, or it looks like a button/link but it’s not, it also adds up to the pile of questions. And this happens because who built the product did not care too much about the product.

Make sure to share down in the comments small design mistakes we do on a daily basis for our products (whether apps or websites) so others can learn from them too. The article was written based on the revised version of the book Don’t Make Me Think by Steve Krug.

One more thing

If you are a blogger, writer or a simple human who loves to write in spare time, you might want to check out Shosho. Something I created to encourage creative souls to write even more and better. Shosho is a styling app which helps you remove buzzwords, jargon and words that are hard to read from your writing. I would appreciate if you give it a try.

This article was originally published on Eugen’s Medium page.

Are small errors like worldwide targeting draining your budget? This Google Ads script can help

• errors, Small
are-small-errors-like-worldwide-targeting-draining-your-budget?-this-google-ads-script-can-help

Human beings aren’t robots. With thousands upon thousands of keywords to keep track of and an assortment of settings to apply on multiple levels of your account, there’s always a possibility that you’ve overlooked something small… or something big.

Whether it’s pushing bids too far, being overly eager in your device modifiers, or forgetting to apply location targeting, mistakes can be pretty expensive. Worldwide targeting, for one, can quickly sap your budget as you serve ads in territories of no benefit to you.

But manually checking these settings can be incredibly time-consuming. What do we say to all things tedious? The answer is always scripts.

This one will do all the legwork for you. Plug in your upper limits and tell it where you’d like it to look, and it will email you a report detailing anything in your account that isn’t right. Perhaps you’ve not applied location targeting to a certain campaign? Or you’re bidding way above what you’d like for a selection of your keywords?

It’s great to run for general upkeep, but is especially helpful after a big campaign build or when you’ve made sweeping changes in your account and need some extra peace of mind.

What does it do?

The script checks user-specified settings in your account, making sure you’ve not pushed any settings further than you would like.

It runs three separate checks:

  1. Worldwide Targeting Checker: the script will flag any campaigns that don’t have any location targeting applied.
  2. Keyword Bid Upper Limit Checker: specify a max CPC limit, and the script will report any keywords which have bids set higher than that CPC. 
  3. Bid Modifier Upper Limit Checker: this will check for any troublesome bid modifiers for location, device, and ad scheduling to ensure you are not pushing bids too high. 

These ensure that you have a quick and easy way to root out any mistakes or oversights leading to inefficiency, over-aggressive bidding, and ultimately to budget wastage.

It can perform these checks within your entire account or specific campaigns (e.g. checking Brand campaigns only). You can also include or exclude paused campaigns and keywords as required.

Once the script has run, it will email you an HTML table report, flagging anything which violates the rules you have fed it.

How to use this script

You can paste the script directly into the Google Ads interface to be run on an ad hoc basis.

In the Google Ads account where you’d like the script to run, go to Tools & Settings > Bulk Actions > Scripts. Create a new script by pressing the blue plus button.

Once you’ve given the script authorization to read your account, copy and paste all of the code below into the input box. You will then need to modify the code by adding your specific criteria.

First, ensure you have added the email you would like the report to be sent to in the EMAIL_ADDRESS variable.

If you’re worried about excessive bids, ensure you set your max CPC by modifying the BID_UPPER_LIMIT. Keywords with a higher CPC than that figure will then be listed in the report.

You can also set your bid modifier limits. If, for example, you would like to be notified of any bid modifiers over 150%, you would set it to 1.5. This should be in the range of 0.1 (-90%) to 9.0 ( 900%). These limits can be set for device, ad scheduling and location separately.

Use CAMPAIGN_NAME_DOES_NOT_CONTAIN, CAMPAIGN_NAME_CONTAIN, and IGNORE_PAUSED_CAMPAIGNS to specify which campaigns you would like to investigate. Depending on the size (and state!) of your account, you will need to be selective with the criteria you choose. If you were to request a report on all keywords with a Max CPC of more than 10p, for example, you’d probably be pulling your entire account. While the script will run in such cases, you may not be able to receive email reports for such an enormous quantity of data.

Once you have pasted the code and set your criteria, save and run the script. Note: at this point you may need to scroll to the bottom of the page and reauthorize email permissions.

And, you’re set! Your report will arrive as an HTML table via email. From there you can troubleshoot any bids, modifiers, or targeting that looks inappropriate for your account.

Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.


About The Author

Daniel Gilbert is founder and CEO of Brainlabs,the smartest performance marketing agency on the planet. As the self-proclaimed superhero of PPC, Daniel’s mission is to change the future of advertising, while creating the best place in the world to work.



Revenge of the small business website

• Revenge, Small
revenge-of-the-small-business-website

For several years, many SEOs have been proclaiming the end of small business (SMB) websites. The theory is that third party destinations (GMB, Facebook, Yelp, etc.) have taken over and SMB sites will rarely see consumer visits if at all. GMB now is so widely used and so complete, the argument goes, that consumers never need to visit the underlying SMB site.

Recent investments and M&A. That description of consumer behavior is partly correct but not entirely. Websites continue to be a critical SMB asset and content anchor. That fact is underscored by WordPress parent Automattic’s most recent funding round of $300 million (at a $3 billion valuation) and Square’s April 2018 roughly $365 million acquisition of site builder Weebly.

On a smaller scale, ten-year old web design platform Duda recently raised $25 million (for just under $50 million in total funding). Duda has a network of more than 6,000 third party resellers and agencies that work with SMBs. It will continue to focus on websites and presence management rather than expand horizontally into other marketing channels.

New Yahoo web design service. In addition, late last week Verizon-owned Yahoo launched a new web design product for SMBs. There are two service tiers ($99 and $299 per month). The offering includes design consultation, ongoing maintenance and content updates (it’s a SaaS product).

Yahoo Small Business was at one time the premier hosting company for SMBs. During a long period of somnambulance, it was surpassed by GoDaddy and others. But following Verizon’s $4 billion acquisition of Yahoo in 2016, the company has sought to invest and develop new small business products and services and regain momentum. Its brand has remained relatively strong among SMBs across the U.S. despite the decline of Yahoo itself.

Now, Yahoo is developing a new generation of marketing products and services for SMBs. The web design service is just the first announcement.

SMB sites more trusted, still visited. A May 2019 consumer survey from BrightLocal found nearly twice as many respondents (56%) expected SMB websites to be accurate compared with Google My Business (32%). This was a surprise. However, a 2018 survey from the SEO firm found that the most common consumer action by a fairly significant margin, after reading a positive review, was to visit the SMB’s website.

Why we should care. The Small Business Administration says (.pdf) there are now roughly 30 million SMBs in the U.S. The SBA defines “small business” as having a headcount of up to 499 employees. There’s a massive difference between a firm with three or even 20 employees and one that has 300. Regardless, well over 90% of U.S. SMBs have fewer than 10 employees.

While a majority of SMBs in theory, now have websites — 64% according to a 2018 Clutch survey — there’s still a significant opportunity for providers of websites. New businesses form and fail every quarter. And even with shrinking reach in organic search and social, websites are likely remainto the anchor of SMB digital marketing into the foreseeable future.


About The Author

Greg Sterling is a Contributing Editor at Search Engine Land. He writes about the connections between digital and offline commerce. He previously held leadership roles at LSA, The Kelsey Group and TechTV. Follow him Twitter or find him on LinkedIn.

4 small details that reveal how design at Apple is changing

• details, Small
4-small-details-that-reveal-how-design-at-apple-is-changing

Apple’s 2019 iPhone event included announcements of just about everything we expected: The typical cadence of updates to the iPhone (now with three lenses!), Apple Watch (now with a screen that’s on all the time!), and iPad lines (now with, well, more iPad!). But as is usually the case, the story of Apple design is told through the small details, not the big launches. If you want to see how Apple’s design team has evolved over the past few months—both leading up to and after the June announcement that Jony Ive will officially leave the company—it’s worth looking at the day’s announcements not just in terms of what Apple had to say about its new products, but what it left unsaid or simply hinted at. Here are a few key details that suggest design at Apple is evolving.

[Photos: Apple]

Apple is colorful again

The era of white, black, grey (and sure, maybe rose gold) gadgets is over for Apple.

The company hinted at this colorful new turn last week, when locals noticed the newly renovated Fifth Avenue flagship store had donned a shimmering, iridescent facade, replacing the austere glass box of yore.

On stage today, Apple execs showed off uncharacteristically colorful new models, the hues of which haven’t been seen since 2013’s iPhone 5c. The new iPhone 11 comes in purple, yellow, red, and seafoam green. The iPhone 11 Pro sports a metal green color too. The boldness of these aluminum cases harkens back to the iPod mini and nano days and the iMacs that preceded them in the late 1990s.

[Image: Apple]

Apple knows it needs to allow customization

When the Apple Card launched earlier this month, people began defacing and customizing their cards almost immediately. Bored by the stark white designs, these fans seemed to desire something more unique and personal. Whether because of changing tastes, the return of maximalism in design, or the fact that Apple is now so ubiquitous, the company’s signature brand of minimalism seems to have reached its zenith.

Today, Apple announced it will launch a customization service in its retail stores called “Apple Watch Studio.” You choose the body, you choose the band, and you walk away with your own take on nearly 1,000 mix-and-match options. Also notable? On another slide later in Apple’s presentation, the company reminded the public that it does free laser engraving on many Apple products.

[Image: Apple]

Apple no longer speaks with Jony Ive’s voice

Despite stepping down as Apple’s VP of Design to launch his own design studio, Jony Ive did show up to the iPhone event today. But something was different: While you could see him, you couldn’t hear him. In the several videos that Apple showed at the event, Ive’s voice was notably absent from the narration. I guess we’ll have to fall asleep to the soft incantations of another, less British brand of ASMR from now on. But jokes aside, Ive spent years introducing his team’s new designs to the public. More than just a changing of the guard, his absence alters the Apple brand itself.

[Image: Apple]

Apple is talking about durability . . . kind of

For many users, the biggest weakness of the iPhone isn’t its battery, connectivity, or camera. It’s its durability—specifically, the glass screen that is beyond-prone to cracking. Today, Apple did everything but actually *say* the iPhone 11 was going to solve the brand’s longstanding durability problems. The company mentioned that the new phones will have the “toughest glass ever” and shared a video of the iPhone falling off a table into a bag, then knocking around in the bag against a tube of Chapstick, of all things, seemingly to nod to the design’s toughness. While a tube of lip balm is not a concrete sidewalk, Apple seems to be advertising the new iPhones as longer lasting without actually claiming it. Whether that’s just marketing or truly improved design, only time will tell.

Apple didn’t show anything shocking on stage, but what it did show off demonstrates that it can and will continue to evolve its product design—which at the moment means mining the self-expression of its late ’90s iMacs to counteract consumer apathy, repairing product flaws long swept under the rug, and discovering its design voice without Jony Ive at the helm. If Apple can do all these things, the next decade of Apple design might be interesting after all.

Why Small Words Matter ? The Importance of Microcopy UX

• Small
why-small-words-matter-?-the-importance-of-microcopy-ux

As UX designers, we focus a lot of attention (justifiably) on interaction and interface design, but how can we continue to raise the bar and create digital products that are more useful, engaging, and simple to use?

Words. They yield more power than an atom bomb. UX writing, in particular, is an essential part of the design process because it can dramatically improve user engagement concerning digital products.

Don’t ever diminish the power of words. Words move hearts and hearts move limbs.

– Hamza Yusuf

Famed usability experts, the Nielsen Norman Group claim that:

  • Scanning text is typical behavior for higher-literacy users.
  • Users read only about 20% of the text on an average page with 600 to 800 words.
  • Concise text, objective language, and scannable copy improves usability by 124%.

There are a lot of distractions and constraints competing for user engagement with digital products. High-quality UX writing cannot be underestimated as a vehicle to both improve the user experience and engage the user.

An often overlooked yet powerful form of UX writing is microcopy.

Microcopy is one of the often overlooked parts of the UX process.
Microcopy with personality engages users and improves UX.

What Is Microcopy?

Microcopy is the small, informative, or instructional text on forms, pop-ups, buttons, search prompts, tips, etc. They inform and assist people in small ways as they are using a product.

Microcopy best practices help to inform and assist users.
Airbnb uses microcopy to assist and inform users within their search forms.

Microcopy serves as a guide when users take specific actions, such as searching for products or trying to choose an appropriate response. Microcopy can also build trust and empathy with users and form a stronger bond with the brand overall.

Effective UX microcopy is:

  • Clear, concise, and easy to understand
  • Takes on the voice and tone of the brand
  • Fits in visually and feels like a part of the design
  • Fills a need, answers a question, or builds empathy
Effective microcopy follows UX principles and best practices.
AVG utilizes clear and concise button text microcopy to let users know exactly what will happen.

How Microcopy Improves User Engagement

Effective microcopy seeks to understand and anticipate user expectations. It allows the user to feel as if they are having a conversation with the interface, and it yields the power to engage users and increase conversions. Here are some of the benefits of effective microcopy:

User Empathy

Adding emotion to microcopy creates a better connection with users, and helps foster a stronger bond. Users fall in love with brands that make them laugh and feel better about themselves.

But how do we know what to convey to create the right emotions? By conducting in-depth user research at the beginning of the UX process. Understanding the users, their unmet needs, motivations, and behaviors will assist UX designers when crafting the most effective empathetic microcopy.

Microcopy best practices such as empathy help build brand loyalty.
Zomato uses a reassuring message after the user places an order with a vendor.

Another example of building user empathy with microcopy is showing the steps that are being taken when placing an order. Giving users a little extra context will provide them with a sense of what is going on and alleviate the stress of wondering when their order will arrive.

Good microcopy UX writing is succinct while giving a sense of clarity and control.
A great example of transparency with microcopy: Order tracking message by Swiggy, the food ordering app, detailing each step in the process

Clarity and Control

There are many reasons why users abandon shopping carts, stop using products, and cancel subscriptions:

  • Ambiguous or confusing messages
  • Too many personal questions on forms
  • Too much jargon
  • Unclear shipping charges
  • Not enough information about the product, service, or process
  • Uncertainty around how to cancel an order
Microcopy UX best practice of giving both clarity and control
Amazon gives both clarity and control in their microcopy by letting users know what will happen when they click a button.

Using microcopy on or around buttons to inform the user what happens next when they are going through a purchase sequence, helps them feel more in control. Another example is using microcopy when installing or updating a product. With each step, the microcopy can let the user know exactly what is, or will be, happening.

For conveying clarity and control, effective UX microcopy does not have to fill up an entire paragraph. It simply needs to be clear and concise. The goal from a UX perspective is to reduce anxiety and better inform users. This example from Mailchimp shows an effective use of microcopy when a user is having an issue signing in to the platform:

Clear and concise microcopy reduces anxiety and informs users.
Mailchimp uses microcopy to build both brand loyalty and provide a less stressful UX nearly everywhere in their product.

Transparency

Because digital products can raise concern for security and privacy, microcopy that builds trust will have a positive impact on the UX.

For example, if people feel insecure or suspicious while making a transaction, it can lead to the abandonment of a purchase or being skeptical about continuing to use a product. Here are a few scenarios where that might occur:

  • Asking for too much personal information
  • Unspecified details about guarantee/warranty/replacement of the product
  • Asking for credit card details for free trial subscriptions

Instead of assuming users will give all of the information asked, effective microcopy can inform the user why it is being asked and how it will be used.

The Netflix sign-up process is an excellent example of providing user transparency with microcopy. They provide reassurance by letting people know when they can cancel a trial without being charged.

Using UX microcopy to provide transparency helps build trust with users.
Netflix’s final step before activating a trial of their service. This type of transparency using microcopy builds trust with the brand.

Another excellent example of microcopy being used to provide transparency is LinkedIn. During the signup process for their premium service, they explain exactly why they need credit card details and how to avoid being charged.

Good microcopy UX writing is essential to the UX process.
LinkedIn uses microcopy to tell users why they need credit card details of the user.

Prompting People to Take Action

Good, effective microcopy can help people complete tasks, drive engagement, and encourage users to go further and do more.

For example, if people are using an eCommerce site and they remove items from their “cart,” microcopy can be strategically placed, encouraging them to continue exploring other similar products.

UX microcopy can help users take appropriate actions.
An example of microcopy being used to encourage users to continue exploring

Driving engagement, providing empathy and transparency, and giving a sense of clarity and control are all tenets of effective microcopy UX. Product designers have multiple opportunities to improve the user experience.

But not all microcopy is good.

The Effects of Poor Microcopy

UX designers should always strive to create effective microcopy. But is any microcopy better than none at all? Not necessarily. Poor microcopy can ruin even the best UX within a product. Here are some tenets of poor microcopy:

  • Unclear and confusing
  • Too verbose
  • Unengaging, vague, and misguided
  • Tone-deaf and non-empathetic

Unengaging text that is vague and unclear can misguide users to take unwanted actions within a product, leaving them angry and confused.

Poor UX microcopy can cause confusion and lack of clarity.
Copy that is confusing and unclear can destroy a brand’s loyalty with its users.

Lack of any microcopy at all, in certain situations, is also considered a poor UX choice. For example, a sign-up form asking for an email address and acceptance of Terms and Conditions without any explanation of what will happen with the given email address is a missed opportunity.

Lack of microcopy is also an inadequate approach.
Not letting users know what will happen with their email address when they sign up is an example of poor UX microcopy.

“Confirm shaming” is another example of poor UX microcopy. It is tone-deaf and non-empathetic. When users experience this, they associate these feelings with the brand and often never return.

Confirm shaming is an example of poor UX microcopy.
Confirm shaming has become a popular practice, but it is not good UX due to its non-empathetic tone. (Vice)

Creating products that are more useful, engaging, and simple to use is a balance between sound design principles and other less recognized techniques, such as the implementation of UX microcopy.

Small words can have a significant impact. UX microcopy is no longer a trend, but a discipline that has made its way into the core part of design processes and systems.

The benefits of effective UX microcopy are substantial: increased user engagement, brand loyalty, trust, and frictionless product experiences. When used correctly, good microcopy can help a product stand out in an increasingly competitive marketplace. User adoption rates tend to be higher and products experience less churn.

• • •

Further reading on the Toptal Design Blog:

Understanding the basics

Why is user engagement important?

User engagement is important because it measures the value users find in a product or service. Products and services with higher user engagement tend to be more profitable and experience less churn. Engaged users also provide a lot more feedback which can be used by internal teams for continued improvement.

How do you write microcopy?

Microcopy can be written using brevity, context, action, and authenticity. With brevity, less is more. Context is helping users figure out exactly what to do. Action uses words that help users do something, i.e., take an action. Authenticity reassures users and helps them feel they know exactly what is going on.

What’s UX writing?

UX writing is the practice of creating copy that helps users interact with a product or service. It includes microcopy, instructions, assistance, guides, error messages, and can even integrate with legal copy such as terms and conditions.

What is UX content strategy?

A UX content strategy is a plan to create content that is useful, usable, engaging, and valuable. The UX content strategy must align with core business objectives and be a part of the larger content strategy.

Small Stars of Interaction Design: Interactive UI Elements

• Small, Stars
small-stars-of-interaction-design:-interactive-ui-elements

Small Stars of Interaction Design: Interactive UI Elements

Powerful and user-friendly product designs are based on elaborately crafted details. Web and mobile user interfaces are all packed with small elements of big impact. Today we offer you to revise some of the UI elements found in the vast majority of layouts, consider their functionality and role and check them in various UI design examples by Tubik Studio designers.

Button

Button is one of the most popular elements of any interface. It roots deeply in the world of physical things and existed much before GUI appeared: push-buttons later simplified to just buttons are simple switch mechanisms enabling to control a process or machine. Pushing, pressing, hitting or punching (great synonym row was developed for buttons through times), a button actually allows for sending the signal to the machine about the action user wants to do. Used in a variety of devices from simple home appliances, telephones, and calculators to complex dashboards. Being a clear element of interactions, buttons were later successfully transferred to graphical user interfaces.

In UI, a button is an interactive element which enables a user to send a particular command to the system. Basically, with this control user directly communicates to the website or application and forward the necessary commands to achieve a particular goal: turn on the player, send an email, buy a product, download some data, add items to the cart and plenty of other possible interactions. Buttons are extremely popular as elements of user-friendly interfaces because they successfully imitate interactions with physical buttons so their functionality is clear even for users with a low level of tech literacy.

racing mobile game design

Button design in a mobile game Real Racing

Today, diverse UI buttons serve plenty of purposes. Typical buttons are designed to be instantly visible: designers apply contrasting colors, shapes and even animation to make buttons noticeable in the layout. Buttons are often supported with the copy that explains the action done with the button. Designers have to apply considerable time and effort to create effective buttons that look consistent with the general stylistic concept but are contrast enough to stand out in the layout.

There are several frequently-used types of buttons with additional functionality.

Hamburger button hides a menu. After a click or tap on it, the menu expands. It is called hamburger due to its form that consists of three horizontal lines – it looks like typical bread-meat-bread hamburger. Although today it is quite a typical element of interaction, hamburger menus are still highly debatable due to the number of pros and cons.

Most users using websites and apps on a regular basis know that hamburger hides the links to core categories of content so they don’t need additional explanations and prompts. The essential advantage is that hamburger menus free space: this way the interface becomes minimalist and airy as well as provides room for other important layout elements. Also, it provides additional benefits for responsive and adaptive design hiding navigation elements and making the layout usable on different devices. The arguments against the hamburger menu are based on the fact that this design element can be confusing for users having little experience with websites: they can get misled with the sign which is rather abstract. Thus, the decision about applying the hamburger button should be based on user research, setting a target audience’s abilities and rigorous testing.

web design animation

Plus button enables to add new content, for instance, a new contact, post, note, position in the list and the like. Sometimes, tapping this button, users are directly transferred to the modal window of creating content, in other cases, there is also a medium stage when they are given additional option to choose from and make adding the particular piece of data more focused. In this case, plus button is also an expandable button.

UI design add button animation

Expendable button opens a variety of options after being clicked or tapped. It is one more way to set the proper flow of interactions without overloading the screen, which is particularly important for mobile interfaces limited in screen space.

ui navigation

Ghost button is a transparent button that looks empty – that’s why it is also called “empty”, “hollow” or even “naked”. Their visual recognizability as a button is typically provided with a shape bordered by quite a thin line around the button copy.  This kind of buttons helps to set the visual hierarchy in case there are several CTA elements: the core CTA is presented in a filled button while the secondary still active is given in a ghost button.

dating_app_landing_page_tubik

Bar

Bar is a UI section of the user interface with clickable elements enabling a user to quickly take some core steps of interaction with the product. Also, it can inform the user about the current stage of a process. Among the basic types of bars, let’s check the following.

Tab bar — in mobile applications, it appears at the bottom of a screen and provides the ability to quickly switch between core sections of content.

tubikstudio-tab-bar-animation

Loading bar is the control that informs a user about the current stage of the action or process. In most cases, users can see the flow with timing or percentage shown in progress.

animation timeline interactions UI

Progress bar provides feedback on a result of the current process so far, for example, showing how much of the planned activity has been done. You may often see in musical players, for example.

audiobook store app design tubik

Audiobook store app design 

Switch

Switch is a control that enables users to turn the option on/off. As well as buttons, it is applied efficiently in modern interfaces as it presents the direct imitation of switches people are accustomed to in real life. The important point is that states of the switch should be visibly clear and distinctive so that user could easily understand if the option is active or not. Contrast and slight animation can make the experience simple and user-friendly. Here’s how it was solved in Toonie Alarm app.

Switch

Gamification Mechanics in UX Design User Journey.

Picker

As it’s clear from its name, picker allows for picking the point from the row of options. It usually includes one or several scrollable lists of distinct values, for example, hours, minutes, dates, measurements, currencies, etc. Scrolling the list, users choose and set the needed value. This type of interactive element is widely used in the interfaces which have the functionality of setting time and dates.

toonie-time-picker

Checkbox

Checkbox is a graphical UI element that marks a particular piece of content, usually setting the choice for the binary options. It is one more element setting the bridge with the real world as it looks similar to the process of filling in tests, questionnaires and other stuff of this kind when you have to put a tick or color the box to mark the option. Checkboxes and switches can be found in any type of user interfaces, especially in the sections of the user, screen or page settings. Also, checkboxes present a common part of navigation in apps and websites with the functionality of task managers, to-do lists, time trackers and the like.

the-todolist-app-tubik-studio

Icon

Icon is a symbolic image used for the purpose of communication. They are informative signs supporting data exchange between the informer and addressee together with text: icons communicate via the images often showing pictorial resemblance with an object of the physical world. In digital design, icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction.

One of the most valuable benefits of icons is the ability to effectively replace the text. This feature is able to boost usability and strengthen navigation as most users tend to perceive and decode images faster than words. However, even the slightest misperception or double meaning can become the reason of poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience. One of the effective variants is using both copy and icon so that different categories of users could feel good with that: this approach is particularly popular in various catalogs of e-commerce websites where different positions are presented by both words and pictures giving the user double support for quick and clear navigation. Here is the example of this approach in Watering Tracker app.

watering_tracker_app_ui_tubik

Based on their functions, icons can be classified as:

  • interactive icons directly involved in the interaction process. They are clickable or tappable and respond to the users request doing the action symbolized by them. They inform users about the functions or features of the buttons, controls and other elements of interaction. In many cases, they are obvious and don’t need the copy support.
  • clarifying icons aimed at explanation, visual markers explaining particular features or marking out categories of content. They may be not the layout elements of direct interaction; also, they are often found in combination with copy supporting their meaning.
  • entertaining and decorative icons aimed at aesthetic appeal rather than functionality often used to present seasonal features and special offers. They present the effective way of attracting user’s attention and enhance the general stylistic concept of a digital product.
  • app icons: interactive brand signs that present the application on different platforms supporting the original identity of the digital product.
  • favicons represent the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing.

mobile ui case study

Cuteen app using custom icons for content categories

Search Field

A search field, which is also called a search box or search bar, presents the interface element enabling a user to type in the keywords and this way find the pieces of content that are needed. It is one of the core navigation elements for the websites or apps with a big amount of content, in particular blogs, e-commerce and news websites, etc. Well-designed and easily found, search field enables the user to jump to the necessary point without browsing through the numerous pages and menus: as this approach respects user’s time and effort, it is highly demanded in user-friendly interfaces.

In terms of design, this element can be presented in different ways, from the framed tab to the interactive input line, or even minimalist clickable icon. In the vast majority of cases, the search field is marked with the icon featuring a magnifying glass. This symbol is recognizable by a wide variety of users so it has proved itself effective for setting intuitive navigation. Experiments with the icons can influence badly on interactions and usability of the layout, so if other symbolic images are applied, they should be carefully tested. The flow of interaction can also be supported with the drop-down menu offering possible options or auto-filling functionality.

ui animation design

Placement of the search graphic control is a significant concern. In web design, search field can be often found in a header of a website: it is the zone of the highest visibility, so putting a search field there enables users to quickly get transferred to the pages they really need without wandering through the website and scrolling down. For example, it works well for big e-commerce websites often visited by users who have a particular goal, a specific item they are looking for — if they can’t find it quickly and conveniently, the risk is high that they will leave decreasing the profitability of the resource. Moreover, the power of habit should also be taken into account: as numerous websites include search into their headers, users are accustomed to looking for it there when they need it.

Talking about the search field in mobile interfaces, the situation differs as the designer is much more limited in the usable space. If the app is based on a lot of content and search is one of the central elements of interaction, it can be found in the tab bar or in the header and easily reached. In case the search is not crucial for the user goals and usability of the app, it can be hidden in menus or shown only on the screen where it’s potentially needed. Recipe app shown below applies a search field with a textual prompt in the top part of the screen.

perfect recipe app design

Tag

Tag is an interactive element presented with a keyword or phrase that enables the user to move quickly to the items marked up with it. Tags are actually pieces of metadata that provide quick access to specific categories of content so they support navigation with the additional way of content classification. Moreover, tags are often the elements which users create by themselves comparing to the names of categories that are fixed by the website and can’t be changed by users.

finance app animation

Tags are widely used on the platforms based on user-generated content: when you upload the photo to the stock, post on the social networks or write on the blog, you can mark your content with the particular keywords which will then unite all the pieces of content marked with the tag.  In terms of interaction, click on a tag moves the user to the webpage collecting all the content marked with this tag. Also, tags are SEO-friendly technique increasing the chances that the content will be found via search engines.

Loader

Loader is an animated interactive element informing the user about the process of content loading. As the process takes some time, this way the system shows that it’s working while users understand what is going on. It plays an important role in usability. Moreover, stylish animation and graphics may add beauty and fun to the process. The example below shows how loader works on pull-to-refresh in Slumber app.

mobile ui design case study animation

Filter

Filters are graphic controls enabling to tune up the necessary settings. They are effective in the aspect of personalization for better UX: users choose and adjust the settings they need. Here you can see how it was realized in Recipe app.

recipe app card animation

Planning information architecture and interface navigation is not an easy challenge which demands a good knowledge of psychology and interaction patterns, user testing and serious analysis from the earliest stages of an app or website design. Still, it becomes the solid ground for positive user experience which will solve users’ problems and motivate them to get back to the product again and again. Small interactive details become guiding stars making interactions smooth and easy.

interface design elements glossary

Recommended reading

Here is the set of recommended materials for further reading if you would like to learn more on the theme.

iOS Human Interface Guidelines

UX Design Glossary: Affordances in User Interface

How Human Memory Works: Insights for UX Designers

Best Design Practices for Website Header

Web Design. 5 Basic Types of Images for Web Content

UX Design: How to Make Web Interface Scannable

Originally written for Tubik Blog