UI vs. UX

What’s the difference between UI and UX?

The term UI and UX are sometimes thrown around interchangeably and while both are important designers and organizations should be thinking about them differently.

The User Interface or UI of a product is the part that you interact with. It could be a dial, a button, a handle, or other parts of the product that are manipulated. UI design is in most products we use, both intentionally and sometimes unintentionally.

The user interface in software typically relates to any on-screen element, including text, labels and buttons. These items communicate information and interactions. In physical products, the interface will also include things that you manipulate with your hands, or feet.

In computers the interface was originally called the graphical user interface (GUI) but now it’s commonly just called the UI.

Great user interfaces tend to convey “affordances.” An affordance is a clue as to how you should interact with an object. For example, the Macbook has a divet that shows you where to put your finger to more easily open it, the Airpods have this too. Buttons have shape and shadow to make them look pressable. These affordances make it easier to understand how objects should be manipulated

When affordances try to convey an interaction by mimicking real-world physical objects, that’s called, “Skumorphism.”
– The original iPad notes app, looking like a physical notepad
– The Trashcan, mimicking the look and interactions of throwing something away.
– The save icon mimicking the days gone by of disks.

All this stuff go into user interface design. There’s a ton to consider in terms of how to design a screen to be simple, friendly, intuitive, and have the right amount of information, features, and functionality.

UX or User Experience Design is often confused with UI but it’s really centered on the end-to-end experience of using a product or service. The interface is one part of the journey but ultimately most people don’t want to interact with an interface, they are looking to get something done.

If the product is a ketchup bottle, then the user interface is the cap, the bottle itself, the protective sheet that you have to remember to peel off to under the cap to get any ketchup out.

The user experience includes those elements but it’s considerations go beyond that. What does it look like on store shelves? How does it taste? How does it smell? Are fries or burgers more satisfying with ketchup? What ingredients are people going to look for on the back to avoid? Will the ketchup produce ketchup pee? Will the bottle make a sound when you squeeze it? Does too much or too little come out? Will I use this bottle at home or at a restaurant? Will someone at a restaurant try to refill the bottle with some other brand of ketchup? Will I know how to recycle the bottle?

All of these scenarios are experiences that someone may have with the product. These experiences may overlap with the actual interface but they are distinct. The interface is the ketchup bottle, and the experience is everything that happens, before, after, or during that may make for a good or bad experience.

Many companies that have software as part of their products have dedicated user interface designers but it’s equally important to have people thinking about the total user experience.

Thinking through the end-to-end user experience will help you uncover gaps in service delivery, customer service, and generally WHY people are using your products and HOW they go about using them. Great UI and UX go hand-in-hand in making better products that you and I can use and enjoy using every day.

design innovation

Making Masks at Home

Making, Stitching, and Sewing Masks

There are a lot of at-home masks circulating the Internet and a lot of hospitals, doctors, and physicians trying to get their hands on them. For the last week, I’ve been designing, stitching, prototyping, 3D printing, and diving in and I’m going to share with you what I’ve learned.

First a warning: No home-made part or mask can curreently claim any certification and shouldn’t be compared or substitute for any official FDA tested product. Fabric masks and 3D-printed parts are prone to quality issues, poor seals and non-functioning filters. These designs should be used as a last resort and even then should be used with caution. Using any personal protection equiptment (PPE) without proper qualifiction and testing is dangerous and can give you a false sense of security.

That being said, we’re going to dive into three things people are making right now.

The first is sewn or stitched face masks. Such masks are generally not “air-tight” like a standard N95 mask but these masks are being used by doctors, nurses and staff for extending the life of a standard mask. They are also being used for patients and other staff that would traditionally not be given any mask to help protect them.

All it requires is a cotton fabric or a t-shirt, scissors and ideally a sewing machine. There are many instructions and examples that go into detail on how to do this. Here are many popular designs: Design 1, Design 2. Design 3. Design 4, Design 5, Design 6. There are many options in the designs but they are easy to produce and people are producing tends of thousands of these.

According to this article based on this research, cotton t-shirt fabric as the most suitable material however different instructions offer alternatives such as unwoven polypropylene, pillow-cases, microfiber, and dish-towels. What I’m hearing is that hospitals aren’t being picky but they are creating in-take procedures to accept sewn masks, sterilize them and clean them. At the very least, you can make yourself a mask for when you go out shopping.

There is a lot of experimentation for using an air-duct filter material, usually rated with a MERV rating of 12-15 but I haven’t found articles on the effectiveness of such a filter for personal use. Since these types of masks aren’t air-tight it’s unclear if this type of filter provides additional protection. If you’re using a filter material other than cotton, consider making it removable.

The second area of PPE innovation is around the area of 3D printing. This breaks into two areas, the first is what I’ll call ready for production and the other area is R&D. Since this entire space is only a few weeks old things are moving very quickly and I hope more things will get past R&D and move into production. (This could talk about how to make a prototype)

On the production side of things, 3D printed face-shields are the easiest to produce.

Face-shields protect the face, eyes, and mouth from large droplets such as sneezes and coughs. There are a number of great designs and they require just a 3D printer and some acrylic sheets. I’ve even included a design that can be made with just clear plastic and an elastic band. Here are many popular designs: Design 1, Design 2, Design 3, Design 4, Design 5 There’s a great video that goes into more detail on this. There are also face-shield designs made without a 3D printer using just foam and scissors and another from Bauer

In the realm of 3D-printed R&D projects, there are a number of explorations into applications of the technology to print more complex parts that are needed. I call these R&D because as far as I know they are still being validated. Validation and testing of devices is critical because of how small the Covid virus is…

Covid-19 Size is about 0.3 microns or less.

While sewn masks that are designed to block large droplets is one thing, trying to block something that’s that small requires a lot of testing and validation.

The idea of 3D printed masks sounds awesome and there are a ton of designs floating around the Internet but going from something that prints, to something that can actually seal and works for an eight-hour shift is really hard. There are thousands of people working on this problem and I hope we’ll get to a design that will work but for the time being, we are talking about prototypes.

There are three major problems that are being worked on.

  • Getting a reliable seal to your face for a wide variety of face sizes.
  • Getting a reliable filter and seal between the filter and the mask.
  • Ensuring that the filter media is any good and prevents air from flowing around the filter.

The first problem is that all faces are different. People’s heads come in all shapes and sizes and unfortunately, the most common 3D printing material is PLA plastic. This is a fairly common plastic but it’s also hard, so unlike silicone or rubber, it won’t bend much to the variety of faces.

Traditional masks and respirators often have bendable portions that fit snug around the nose and are made from a material that can conform to the face. People are trying to design around this issue with a wide variety of ideas:

  • Producing a wide variety of sizes
  • Trying to mold the plastic using a heat gun or microwave
  • Using a softer plastic for example PTU
  • Use of rubber foam to line the inside of the mask
  • Using an over-printed inner gasket or gluing parts of a silicone to the inner surface.

Each of these solutions is being worked on and I’m hopeful that one or several will pass clinical tests and validation.

The second problem is the filter. Some designs are using commercial filters that are available and click-in or screw into a design. Other teams are modifying anesthesiology filters to work with masks or attaching various HEPA filters and hand-made MERV/Cotton filter combinations.

The challenge with all these designs is that they need to be safe. Mass General Covid Innovation Group is passing designs through a number of validations:

  • Fit testing
  • Exhalation resistance
  • Inhalation Resistance
  • Filter Efficiency
  • Bacterial Filteration
  • Ability to scale production to thousands quickly
  • Failure mode effects analysis (FMEA)

In addition, designs are being evaluated for how the device can be sterilized and used/re-used for long durations of time. Such a design and product challenge would be aggressive for teams to produce in a six-month window. I’ve been watching teams bring solutions and prototypes together in the last two weeks working day and night.

In addition to respirator style-masks, there are efforts to print parts for ventilators, over the head -PARP-style respirators, and more. Teams from individual maker spaces and large companies are participating. Companies like New Balance and Gap are turning their sneaker, and clothing making machinery and skills into making fabric filters. Companies like Ford, GM, and Tesla are exploring how to rapidly-produce ventilators.

The R&D space is moving quickly and I’m hopeful that some of these solutions can quickly and safely helping frontline workers.

So if you have a sewing machine or 3D printer, please put to immediate use, you can start making masks and face shields today. If you still want to help but don’t know how to sew or have a 3D printer. You can help too… Stay Home!


Apple’s 2020 iPad Pro

If you’re anything like me, it’s been many days in quarantine and your kids stole your iPad a few weeks ago. So let’s take a look Apple’s new iPad Pro and what makes it so new.

Since the original announcement of the iPad over 10 years ago, the iPad has typically been considered the fourth screen device.

Your TV was the 1st screen, your computer was the second, the third was the mobile phone. With this release of the iPad pro, Apple is trying to change the narrative. Apple released two videos –
“Your next computer is not a computer” and “How to correctly use a computer”

In both videos, Apple is clearly trying to make the iPad your second screen taking the place of the computer and they are starting by targetting Pro’s with the iPad Pro. But Why would Apple do that?

If you look at Apple’s financials, over the last year you can see that revenue went down for Mac and iPhone business. However, iPad was up 17%. Apple would love for you to buy an iPad, pair it with some Airpods or Beats, and buy plenty of accessories like keyboards, apple pencils, and dongles.

Apple has been great at hardware advances and it’s no surprise that the display, camera, and performance are getting better and better. The introduction of Lidar is a surprise but this seems to be an extension of what Apple’s been doing with the Facetime camera.

Lidar stands for LIght Detection And Ranging. It sends light beams and then captures the reflection to figure out the range and spacial orientation. It’s used by the Mars Rover, some self-driving cars and now the iPad. It’s being used to improve the Augmented Reality experiences.

In terms of AR, I think there are two interesting areas to explore. The first is gaming. We’ve seen a lot of AR-enhanced games and while they are fun for a few minutes, apart from Pokemon go, few have had lasting value. With better cameras, these games will continue to improve. These technologies set the stage for AR glasses that Apple is rumored to be working on.

The second area in AR is how it’s being used professionally and this is where the iPad Pro may really shine in terms of its technology.

Several years ago Google had introduced AR into it’s larger tablets and Facebook’s Oculus has been pushing into this space. The new iPad’s Lidar is likely to find fans in architecture, space planning, and interior design and Apple’s videos are showing this future.

I know a number of folks who have tried to move to the iPad as their primary computer over the years with many issues, but Apple is systematically working on removing their objections.

Certain types of editing workflows are just easier with your hands on the keyboard and trackpad so Apple is introducing what can only be described as a variation of the traditional mouse and pointer user experience.

The user experience of the trackpad interface is particularly interesting. When not in use the pointer disappears and when it is in use the pointer snaps to controls as you get close. As you hover over text, spreadsheets or other controls the pointer shows context. Apple is even taking advantage of Fitts’s law to make sure that edge gestures like control-center or task switching is particularly easy. The full-size keyboard also removes many of the objections for typing longer documents on the iPad.

The other main objection for using the iPad as a computer is the lack of pro-level applications. Apple has been chipping away at this problem and some tools such as Adobe Photoshop and other pro-level tools have started to be available, however, even Apple’s own pro-level tools such as Final Cut Pro, Motion, and Xcode haven’t yet gotten their 1st generation iPad versions, making it hard to convince both Pros and larger software companies.

The iPad is looking like a great computer alternative but, it’s unlikely to replace your computer if you’re a true pro. Pros in audio, video, photography, architecture and engineering are likely to need tools and applications that aren’t yet available on the iPad Pro.

Apple is making great progress on a technology called “Mac Catalyst” that is allowing developers to share more code between their iPad, iPhone and Mac apps and that will also help.

So if you’re a Pro the new screen, keyboard, performance, and Lidar enhanced camera can certainly come in handy, but what if you’re not a Pro?

For non-pros, this can absolutely be a computer replacement. Web-browsing, document editing, portability, is a great option. The only potential downside is the price. When comparing the new iPad Pro with the new 13″ Macbook Air the two are almost the exact same price. If you configure both with 245GB and keyboard the iPad Pro is $84 more expensive.

So is the iPad Pro a computer replacement? Probably not for the true pros, it’s still a fourth screen for most but I do think the format for a tablet/slate computer is likely to become the second screen of the future.


Apple User Experience

Apple has struggled on the UX design front over the last few years. You can see some of the problems in both the hardware and the software across a number of products but I’m going to go deep on just one feature that you use every day the lock screen…

The iPhone lock screen and it’s overall design was part of the original launch of the iPhone, but the simplicity of the original design has eroded over the years.

The original design was:

  • Hard to trigger by accident
  • Simple and intuitive (even for a baby)
  • Could be done with one hand and taking the phone out your pocket couldn’t cause an accidental gesture
  • There was nothing to confuse you

As the iPhone grew in popularity there was a lot of interest in having more functionality quickly available. The iPhone was the most popular camera and quick access to the camera was added to the lock screen in iOS 6.

All the way through iOS 8, there were two primary gestures… Swipe across to unlock and a new gesture to swipe up to get the camera. The camera was hard to trigger by accident and gave a hint if you tapped it.

In iOS 10 things started to get more complicated.

  • The home button had become a fingerprint reader
  • The home screen was now the primary way to view notifications and act on them.
  • Apple was also experimenting with HandOff allowing you to launch or hand off applications from your computer to your phone.

That brings us to iOS 12 & 13. With the elimination of the home button, FaceID, 3D Touch, Control Center, Widgets and Notification Management… the functionality of the home screen got confusing and the original simplicity and vision were lost.

Apple introduced gestures from every edge of the screen and even used 3D-Touch to overload additional actions. The obvious on-screen gestures were gone and in it’s place were a large collection of ways to access secondary functionality.

  • The time is harder to read – thinner font
  • No on-screen instruction or obvious visual area to drag to unlock.
  • Camera no-longer bounces to show the direction of camera bounce/hint.
  • If you drag up to show notifications, you can’t drag down to hide them.
  • If you drag right you end up in widgets (unused by most people)
  • If you drag to the left you get locked in the camera area with no obvious way to get out

None of these things is a show-stopper but combined they clutter the simplicity of the original design. While the new design has more features it’s not necessarily better for the majority of people. While it adds features that 5-10% of folks may care about it complicates the experience for the other 90%.

When Apple originally released the iPhone they also released the Human Interface Guidelines (HIG). Over the years the HIG has gotten diluted and much of the advice on simplicity, legibility, texture, and usability has been diluted or removed.

As Apple continues to grow and evolve, I’m hoping they re-focus on the simplicity and elegance of the user experience. While there’s no doubt that Apple has been successful from a financial perspective the quality of their products have been declining. I’m hoping Apple’s able to re-focus on the core experiences and bring back the simplicity and delight that made the first generations of the device so magical.