𝐌𝐢𝐧𝐢𝐦𝐚𝐥 𝐓𝐨𝐠𝐠𝐥𝐞 𝐔𝐈

ALT

A simple toggle interaction concept focused on usability and visual clarity.

In the Details: Assume Intent

There are two philosophies when it comes to keeping users from making mistakes. You can assume that they are going to make mistakes often and check every time. This is the approach that every video projector takes: “Press power again to shut down.” How many times have you accidentally picked up a projector remote, pointed it at the projector and pressed the power button and then thought, “Oh, what am I doing? I don’t want to turn off this projector.” I’ve never done that. Not once. And yet, I have to press the button twice every single time. It’s become a habit such that I automatically hit the button twice. If I were doing it accidentally, I’m sure I would accidentally hit the button twice.

The other approach is to assume that people usually mean to do what they do. This is the approach that the UI designer took in the video system in my classroom. When I hit the power off button, it displays a message indicating that it will shut down in some number of seconds unless I press a button to stop it. That’s a smart choice.

In the Details: Hint Text

Hint text is commonly used in web forms to provide a hint about what you should enter in a field. For example, it might show you the format of the data the field is expecting or an example. Hint text is usually a light gray so that the user doesn’t think that it is actual text in the field. It typically goes away when you click in the field.

I was recently setting up an event on Tito and filled out the date and time in this form. When I hit the button to save this information and continue to the next step, it told me that the time I entered was invalid.

This puzzled me, as it certainly looked valid. After a couple minutes of trying to re-enter the time, I realized that the “PM” show in the field is hint text. It expected me to click on the PM and type “P” or “A”. Once I did so, it looked like this.

Notice the difference between the “PM” in the Start time and End time fields. This is the first time I’ve encountered a time entry field that works like this. It was unexpected and confusing. If I had wanted to change it to “AM”, I may not have had the issue, as I probably would have clicked it to try and change it. As it was, I assumed that PM was the default, and the error message that was provided did not explain the problem.

Micro-interactions are the most subtle yet important aspect of an app’s UI interactions. Without further ado, let us examine the topic of micro-interaction in UX design.

Micro-interactions are the most subtle yet important aspect of an app’s UI interactions. Without further ado, let us examine the topic of micro-interaction in UX design.

I’m a sucker for dark mode. I’ve preferred dark UIs at least since Adobe standardized theirs in 2012. I like the separation it creates between the tool and its content, and I find it easier to make important things stand out. Besides that, I find it easier on the eyes and aesthetically pleasing. As you can imagine, I’m digging the current trend in everything from web apps to operating systems providing a dark mode.

Very rarely do I find Microsoft doing something better than Apple, but it does occasionally happen. When an HTML email message has a light background color applied, and the message is displayed in dark mode, both Apple Mail and Microsoft Outlook will still display the text in white, expecting it to have a black background. So, you end up with a message looking like this.

Microsoft accounts for this with a button in the top-right corner of the message that very easily toggles the content display. It looks like a little sun.

In Mail, however, you have to open the View menu and then the Message sub-menu to select “Show with light background”. That’s neither quick nor intuitive.

Chalk one up for Microsoft.

Clever rotation prompts based on video ratio in YouTube

Micro-interactions have a lot of potentials that designers often overlook. If given the right focus, micro-interactions can improve user engagement and establish a sense of joy among the use.

In this article, you will focus on the intuitive micro-interactions that you should take out for a spin for your next project, to increase its user engagement and popularity - https://uxplanet.org/9-microinteractions-to-inspire-your-next-project-6ad953f6e80c

We’re all spending a lot of time in on-line meetings these days. My company uses Webex, and it’s okay, but I occasionally use Zoom for non-work purposes, and it just leaves Webex in the dust. The design of its capabilities and controls is just so much more thoughtful.

I don’t know that I’ve ever been on a conference call without someone having to be reminded that they are on mute. Zoom has two fantastic features that address this issue. Zoom will detect when you are talking while muted and display a big message across your screen to tell you so. That’s awesome. The second feature is a bit more subtle.

When you have muted your mic, you can hold down the space bar to temporarily unmute yourself. Release the space bar and you are immediately muted again. It’s a “push to talk” button. Get in the habit of using this, and you’ll be a video conference pro.

I noticed a small improvement to Apple’s Mail app in iOS that is worth noting. My work phone is still running iOS 12. I was trying to forward a message to a co-worker, and hit the reply icon at the bottom of the screen. Now, I had opened an email that I had already replied to, and I wanted to forward my reply to someone else. I didn’t realize that, even though I was looking at my reply, the icon in the bottom bar replied to the message I had opened.

What I needed to hit was that much smaller reply icon at the bottom of the message I wanted to forward—the one right above my photo—which was scrolled off the screen at the time.

My personal phone is running iOS 13, and they’ve fixed this bit of confusion in a  very elegant way. Rather than having a footer bar that affects the opened message, there is now a footer bar that belongs to the message that you are currently viewing. As you scroll that message up, the footer will detach from the bottom of the screen and become the bottom of the message. The next message scrolls into view, and once it fills about half the screen, its button bar scrolls up and locks to the bottom of the screen.

Here, you can see the buttons for a message scrolled off the top followed by another message with its button bar affixed to the bottom of the screen. This leaves very little room for confusion.

Over a year ago, I sang the praises of the “Move to…” button that Apple Mail places in the Touch Bar of a MacBook. It’s also found in iOS. I’m thrilled that it has finally made it to the UI of the desktop app. It’s now prominently placed in the center of the toolbar at the top of the window.

Here it is labeled “Design Course”, because I have my spring appointment letter selected in my inbox. I assume that it recognizes the sender and knows that every message I have from her has been filed in the Design Course folder. All I have to do is click that button, rather than having to drag the message to the correct folder in the Mailboxes side panel.

Stepper XVII. This concept is a touches friendly version of the rebounded shot. The idea will fill well on wearable devices and in apps where this type of data picker might play the central role. Consider it as an accent element of an entire screen.
As the previous concept it needs some room to interact, so don’t use the concept when you are designing a complicated form with lots of fields. But — games, lifestyle apps, etc. — you are welcome.
Also, we could use this approach to add an alternative layer of interactions to our UI. It would improve UX regarding accessibility. People who are not able to make precise touches on a screen (to catch the arrows, e.g., children, people with moving tremor or just a mentally exhausted person) could swipe up/down on the screen to set needed data. #microinteraction #interactiondesign #uianimation #ux #ui #uidesign #microinteractions #dribbble #dribbbleshot #prototyping #designexploration #uiconcept #aftereffects #datapicker #stepper #button #mobiledesign #mobiledesigner
https://www.instagram.com/p/BquYjCqBVc7/?utm_source=ig_tumblr_share&igshid=yg89pzcvjq4w

Microinteractions and empty state from https://functionofbeauty.com/

Magic button that hypnotizes you to press it more and more ;) When clicking impatiently even more magic comes out of it :)

Made with Framer. Check the live demo!

Shot on Dribbble

https://www.awwwards.com/8-steps-to-amazing-microinteraction-design.html

“The details are not the details. They make the design.” – Charles Eames

So much of our debt is in the little details. The details get easily overlooked or just ignored. The details end up at the end of the list. They’re what we get to when we’re ahead of schedule, which we never are. The details get deferred to the next build. The details are tagged “minor,” if not “trivial”. As a developer I worked with once said, “Broken gets fixed. Shoddy lasts forever.”

In his book, Microinteractions, Dan Saffer gives us a structure for understanding and designing the detailed interactions that make up a user experience.

1. Trigger: Initiates a microinteraction. A trigger can be user-initiated or system-initiated, based on a detected condition.
   
2. Rules: Define what occurs when a microinteraction is triggered. There could be a single, simple rule, or a complex set of rules that make decisions based on available information.
   
3. Feedback: The rules are invisible to a user, so the understanding of a microinteraction is dependent upon the feedback it provides.
   
4. Loops & Modes: Meta-rules that affect the lifecycle of a microinteraction. A loop is a cycle that repeats based on timing and conditions. A mode is a fork in the rules affording a different type of interaction than the primary one, such as changing the rules a microinteraction is following.
   

Formalizing the way we think about details is one great way to bring more attention to them, reducing the risk of unintentional debt. Formalizing the way we document details is another.

• Documenting details will lead you to give them more consideration during design.
  
• Documenting details will lead developers to pay more attention to them during implementation.
  
• Documenting details will lead QA to take them more seriously during testing.
  

Once your team begins treating the details with respect, you will find that the overall quality of your product improves dramatically. Saffer explains, “…most complex digital products, broken down, are made up of dozens, if not hundreds, of microinteractions. You can view a product as the result of all these microinteractions working in harmony. This is what Charles Eames meant when he said the details are the design. Everything’s a detail, everything’s a microinteraction: a chance to delight, a chance to exceed users’ expectations.”

Be the champion of details in your organization.

Adidas App tutorial.
•
•
•
•
•
•
#Adidas #App #Design #UI #UIDesign #Example #Tutorial
#Iphone #microinteraction #Principle #SketchApp #RedSocial #iOS #iOSApp

Here i got “micro-interactions” and still learning

#microinteraction #semiotican (at Semiotica Indonesia, LLC)