Berlin-based, DEADBEAR, aka Nick Donovan. Focus-single "Tongues" Donovan blends shards of incomprehensible vocals with layers of drums, glockenspiels and electronica found sounds alongside the vocals of Japanese collaborator Qrion - famed for her work with Ryan Hemsworth and her own unique productions.
The Interface Layer
A year ago, Scott Belsky's article in Medium described the "Interface Layer" as the future of UX design. The Interface Layer is essentially a designed interface that aggregates underlying technologies into an experience that is more convenient than using the aggregated services separately. By consolidating the functionality afforded by multiple APIs into one interface, you can create a more convenient tool. Take a look into Belsky's vision of the future in this excerpt from his article:
I woke up this morning and grabbed the nearest screen. I selected my transportation for the day, refills of groceries I am running low on, what sandwich I want for lunch, a time window for my apartment to be cleaned, a dry-cleaning pick-up, and a reservation for dinner. I also selected a gift for my sister’s birthday, from a suggested list curated for me. After a productive 5 minutes, I got up and had breakfast.
You may assume I used Uber, and then Fresh Direct or Amazon Fresh, and then Seamless, and other speciality apps and services striving to iron out the logistics from my life. Maybe I did, but I’m not sure. Why? Because I took all these actions through a beautiful and customized interface that aggregates such services and blends them all together into a more integrated and frictionless experience.
Belsky uses popular services like Uber and Amazon to make the point that it will be the design that ultimately creates value. While I doubt that all these companies will offer up their technology to third parties, I agree with Belsky in that users prefer an aggregation of services and apps that do more. With the atomization of apps that has been occurring since the launch of the smart phone, it's easy to get overwhelmed in the seemingly endless number of options. The Interface Layer offers simplicity and convenience. By offering the option to get an Uber in Google Maps, Uber is differentiating from the competition. At the same time, Uber is missing out on branding and advertising opportunities by letting users access their service outside of their app. It is interesting to see how this playing out today in the sharing economy. Let's take a look at what this could mean for audio platforms.
Music's Interface Layer
Audio platforms like SoundCloud, Spotify and BandCamp already offer their APIs to third party apps and bloggers. While I'm sure these companies would prefer that you use their native apps to listen to music, they get free advertising when a blog posts a song using their service. Before the Interface Layer, being shareable was top on the list for audio platforms. Now HypeMachine and other music aggregators are taking advantage of these generous APIs and offering an Interface Layer that aggregates content being shared from blogs. These companies are really shaking up the industry because the user could potentially become more loyal to the interface than the service beneath the Interface Layer.
Ultimately, the user wins in this battle because they gain more access to the music they love, but how does this affect the companies providing the audio services? To combat commodity pricing and lost brand loyalty, your platform has to have a differentiator. Like many other industries, UX design is emerging as the key differentiator for audio platforms. I think you will find that good UX design will become a priority for audio service platforms because it is the user experience that decides which audio app will survive. In addition, audio platforms should be making investments and plays in the Interface Layer to ensure their product isn't lost in an API. Audio platforms will always offer more capabilities in their native apps, but the problem is getting hung up on features. Audio companies need to transform their applications from a product into a great user experience. In the age of the Interface Layer, user-centered design must extend beyond the core of your product and influence every aspect of your application.
@MrDenav and @lucasmarinm of bluedashed.com have recreated some classic record covers (including Joy Division's iconic Unknown Pleasures album) using only CSS. This alone would make for some cool effects, but they also made them interact with the music using Beatdetektor. With the rise of streaming music services, the industry is trying to monetize the music listening experience as well as the music. I could see lots of bands doing this to add value to their album-streaming experience. Sadly, the demo only plays a short preview of the song from iTunes. Only works in Google Chrome.
There are thousands of tools you can use to prototype your ideas, but Illustrator is probably not one that comes to mind. If you're a designer, Illustrator should be at the top of your list for prototyping. I've been making wireframes in Illustrator for a while now, and I love how fast the process is. Not only is Illustrator fast, it takes a modular approach to text and symbols allowing you to make global edits with very few clicks. Some might see Illustrator's lightweight design options as a reason to choose Photoshop instead, but I've found this simplicity helps to keep my designs clean and concise.
For mobile applications, the multiple artboard functionality is what really makes Illustrator perfect for prototyping. I can wireframe every screen of my app on its own artboard. I can experiment with multiple layouts, and export these as PDFs for initial UX Flow reviews. Once you have an information architecture worth testing, I use an Illustrator script called MultiExporter to export every artboard in my document as a separate PNG with one click. Now that I have all the screens, I drop them into InVision (this is a great tool for teams and it's free!) and add hotspots for live prototyping and collaboration. Once the UX flow has been decided you can use a wonderful little Illustrator plugin called Specctr to annotate your wires. WARNING: your developer may give you a big fat kiss on the lips for giving him annotating designs. I think including your developer in early prototype conversations is a must, and having annotated wires will help alleviate headaches later on. Another key aspect of prototyping is animation. While InVision does have some animation options, I will often use Keynote to throw some animation ideas together. As a bonus, Keynote allows you to copy/paste from Illustrator so it's an easy process to mock up any animation. With a few plugins and free programs, Illustrator will have you prototyping at top speed. More importantly, all of the designs you create will be very easy to tweak and adjust, making you a truly agile designer.
- For more on using Illustrator for UX prototyping, check out this article from Adobe
- Check out how this guy recreated Google Material Design with Keynote animations
The "Walkthrough" Approach
This is the most common method used by companies like Google and Squarespace. It walks users through the flow using popovers and intro screens to help you through their UX flow. This approach is the most similar to having a professional on hand to help you with onboarding. To ensure that the popovers aren't too cumbersome, they should be easily dismissed (See my earlier blog post on Popovers).
The "Do Something" Approach
Used by apps like Tumblr and Ness, this approach is great because it gets the user to create content almost immediately. Tumblr considers its UI to be so intuitive that it doesn't need a walk through. If your app is simple enough, this can be a great way to get your user addicted to using your app.
The "Setup" Approach
The simplified approach helps the user through creating his account then you're on your own. This is another good approach for apps with a very simple UI because it doesn't overwhelm the user with options. Companies like Apple and FitBit do this to help personalize their software for your needs.
The "All In" approach
This approach walks the user through the set-up process and prompts them to post something. Pinterest uses this approach to get users to sign-in and post a Pin in one approach.
Like many people who design digital experiences today, my first experience with a screen was a video game console. When Super Mario 64 came out, I remember discovering that I could warp Mario's face on the opening screen. You could bob his head to music. Nod his head in answer to a question. Twelve-year old me was delighted. The same delight that you feel when you are sucked into a game could be harnessed to create delightful UX. As designers, I think we spend too much time trying to create something slick, shiny, and expensive-looking that we forget to delight the user.
One way we can go about this is through gamification. Apps like Nike+ and RecycleBank use achievements to motivate users to do things like exercise and recycle. While they keep you motivated with badges and awards, you completely forget about those ten pounds you shed from running IRL. Users want to play, and the desire to be at the top of the leaderboard can be a powerful motivator. If apps like ChoreWars can motivate roommates to clean their toilets for experience points, anything is possible!
Playfulness isn't just about motivating the user. Sometimes it is the little moments of surprise that can cause the most delight. Subtle animation, hidden easter eggs, and witty microcopy on a 404 page can all be opportunities for delight. These subtle interactions with our users leave them with a positive feeling for your app, and if you can get a laugh? You might just have a lifetime user on your hands. I know you people are playful because you have wonderful imaginations. So quit printing out Jeff Goldblum signs for the bathroom and use that playfulness in your UX!
Hotel Tonight is one of my new favorite apps. I'll be honest, they hooked me with the animated intro screen which animates little Hotel Tonight logos coming to life around the city with the quote "I see the future but live for the moment." Other apps are just showing a loading animation at this point, but it's 2015 and the user has to be delighted if he is going to use an app. I love the idea of last-minute booking as an app, but that's not why I love it. Hotel Tonight really respects the importance of my taps. Booking a hotel on this app requires only three taps and a swipe, totaling about eight seconds (compared to Priceline’s mobile process which is apparently 52 taps, 102 seconds and Hotels.com’s app 40 taps, 109 seconds). I also love how the top level nav makes it easy to jump from section and know where you are in the app at a glance.
I love the way they handled common frustrations in their photo upload and date picker solutions. The date picker is beautiful, simple, and intuitive. It allows you to scroll horizontally instead of using the phone's native drop down. The "Snap Your Stay" feature could be easily ignored, but it is brilliant for several reasons. It tackles the problem that many apps have: how do you get users to create reviews? Normally, users would be required to take pictures and title them without any guidance, but this system takes away all of the doubt. Simple placeholder boxes for content guide the user into which types of pictures they should be taking, and as a bonus, the naming is already taken care of. They even add little hints in the comments like "Take a picture while the bed is made" ensuring that the pictures are as accurate as possible. If that wasn't enough to get the user excited to submit, there is a progress bar that also helps motivate users to publish their review.
Way To Go is an interactive experience that could last your entire life. If you want to run around the woods for the rest of your life, that is, and who doesn't? I love the art direction here, and the immersive feeling they've achieved. I see this being a medium for entertainment in the years ahead. I would love to see a feature film set up in a non-linear format like this. Where The Wild Things Are as an interactive experience? Yes, please...
One of the most delightful things about my favorite apps is the intuitiveness that they have. In today's mobile world we think we don't need to be trained how to use our apps, but that's only because the best apps have already trained us. In the desktop world, it's easy to add a hover state that gives you a clue, but in the mobile world, this isn't an option. How do you teach the user about a workflow or warn them about what the consequences are for their next click on mobile? Enter, the popover.
A popover is a notification or additional information in the middle of using an app that may help users better interact with the app and more companies should be doing it. Sure, you have to dismiss it the first time but at least someone, somewhere is trying to educate us and save us time in the long run. Here are a few best practices for popovers:
- Check that the original content is visible during a popover
- Make the popover easy to be dismissed
- Show the popover for the user's first experience only
Too much text, awkward crop, wrong file size-- it's hard to keep up with the correct specifications for social content. Introducing the Spredfast 2015 Social Image and Video Size Guide:
As a user experience designer, I pay very careful attention to the needs of mobile users. Today's mobile devices are getting larger screens and with that, the context of how users engage with their devices is changing. When is the last time we studied how users actually hold their phones? According to a 2013 study by Stephen Hoober, there are three ways that users hold their phones:
One handed - 49%
Cradling - 36%
Two handed - 15%
I'm sure these numbers would be quite different today given the number of phones with larger screens. Of course we change positions often while using our phone based on the UI of the app or because of real-world factors like subway stops or stoplights. Does this mean we should be avoiding the dreaded upper-left corner because most users are one handed and right handed? It definitely makes the problem more complex. I think we should realize that the user is flexible, but perhaps we should design our UI to reflect the position we would prefer our user to take.
NY Agency, Gretel has really outdone itself this time. The brilliant use of color, texture, and motion sums up everything that is good right now in design trends. The whole thing comes together in a way that doesn't feel busy, just bold and strong. Brand New describes it like this:
I can’t pinpoint what it is that makes this so appropriate for the audience but I do know it wouldn’t work for a channel for white men
...and that, is a wonderful thing. Check out all the pictures on Gretel's site.
Michael Hansmeyer is an computational architect that uses complex algorithms to create architecture that looks like it is straight out of some alien insect world. In his Columns piece, he uses CNC cutting on ABS plastic to create four columns where no surface is the same, but the whole project somehow comes together in perfect unity. I can imagine that when you see this in person you feel the same sense of wonder that an ancient tourist may have felt upon seeing the Parthenon for the first time.
This is too real.
Check out this simple interface for glitching images for free online. Simply drop in an image, adjust some settings, and you'll have a glitched image you can save and use anywhere. Much easier than going into a text editor and glitching the image manually. I glitched my Facebook profile picture, and I'm pretty happy with the results. Great work Airtight Interactive!
Try it out: http://www.airtightinteractive.com/demos/js/imageglitcher/
I put in some long hours in front of the computer in 2014, and I couldn't have done it without Soundcloud. This is my take on the music that defined 2014 and the bangers that I just couldn't stop listening to. If I was already sick of a song I included a remix so this mix would be as fresh as possible. In 2014 Every rapper was on Molly, the evolution of DJing turned into 90s R&B, and PC Music dominated the scene with tracks so sugary you could leave them outside all year without losing any sweetness. I love that in 2014 there is no such thing as a guilty pleasure. So sit back and enjoy the year of self-indulgence. If you like what you hear, follow me on Soundcloud.
Some researchers at Huge test a basic design element: the mystical "fold." Check out a summary of their findings below.
Reposting this because of what these guidelines did for me. If I were to recommend one set of guidelines for interaction design, this would be it.
Check it out in the link below...
Wonderful collection of design guidelines from the IBM Team. I especially enjoyed the interaction chapter.