Sometimes I hate my old profession. I mean really hate it. Yesterday was one of those days. Amidst the tragedy and chaos that was the 2013 …
—David Tran, Creator of Sriracha [source]
—Venetia Pristavec, creative lead, Airbnb.com
Washing machines. Good user experience; You stuff clothes into the machine, Turn it on & set it in less than 3 buttons and out comes clean, nice smelling clothes. You don’t question it. It just works.
I would compare that to someone editing their photos in Adobe Lightroom.
Sure, the pictures [clothes] come out nice, and you get to edit a bunch of pictures [clothes] quickly, but there are discrepancies you did not see and/or choose to ignored. There might be some car in the way of your landscape of Yosemite, or some stain in between your teeth at your friend’s wedding. But that’s okay. It’s not a big deal for you, as photography is a commodity to most people, including you. The ease of the UI/UX in the Adobe Lightroom software serves your needs. “A+++ will buy again!” as a typical eBay reviewer would say.
If you were a power user, you would edit each individual photo in Photoshop. You would gain absolute control [to an extend] over the images’ final outcome. You take satisfaction in completing a tedious process (when editing multiple pictures) in a somewhat complex software to get the exact results you want, but not all people care to be power users.
Which brings me to my point: handwashing your clothes = photoshop = power user = best clothes washing UX of them all, in my opinion.
Machine washing your clothes is a good experience, but handwashing = BEST. Let me ask you—when talking about a specific task/event that has to be repeated over and over, what makes for acceptable user experience? For the average person and for certain things, the answer might be as long as the [lesser] amount of effort in the process justifies the quality of the end result.
That’s average-joe thinking, which is fine. In fact, if everyone was a car expert, beer taster, fitness guru, then businesses would have a lot less things to sell. If you REALLY start thinking about it, like actually take time out of your day to think about it, you know that the stain on that shirt is not coming off without scrubbing it. You know that your sweaters, jeans, and clothes will retain dirt/sweat particles after it comes out the machine wash. If you don’t believe that, try dipping a pair of jeans into a large container of water+detergent and see how brown the water becomes after ten minutes. Only when you handwash something over and over again until the water is transparent, then you will know it is truly clean, which is the ultimate satisfaction of all. The knowledge of the problem, the understanding of the amount of effort in the cleaning process that will lead to the amount of cleanliness in your clothes = the ultimate user experience..in handwashing clothes, that is.
To recap (TL;DR):
Photoshop > Lightroom
Organic > GMOs
Handwashing clothes > Machine washing clothes
So I was browsing through some sports blog, and came across this tv segment on youtube. Just wanted to make a quick blog post to say how much I like the way the ESPN show, First Take, laid out this three-way video conference.
The key element here that I find exemplary are the arrow shapes on the borders of each person.
Without it, it would be three separate squares speaking at the tv viewer. Nothing particularly wrong with that, but if you can make something exception, do it. With the arrows around the borders, it helps the tv viewers move their eyes between the three people. Turning a static layout of three heads in three squares talking at you into a slightly more quasi-personal interaction between the four of you. Simple visual element, yet so effective.
Disclaimer: I like the arrow shapes, but do find discrepancies in some of the other visual elements (i.e. the shade of yellow-orange, black outline on everything, and centering of the bottom text).
I’ve noticed something in web design lately. The UI feature of having a left and right buttons on each side of the browser to indicate the next slide or image. You usually see these in fullscreen image slideshows, blogs, and even some newer version of some news sites (example: USAToday site).
The problem I have with it, is these arrows are css positioned to always stick to the sides of the browser, no matter what the screen resolution is. This works fine for laptops, but for people like me who have monitors at 1920px wide and up, these buttons become a lot less useful.
I’m not too sure why I keep seeing this UI mistake [almost] everywhere but it is not too hard to fix. Perhaps the designers/developers are assuming that the masses are on laptops, so they do not care about the large monitor users, which, by the way, 1920px is not a very big nor expensive monitor now-a-days.
Like my criticism of the tumblr feed a few post back, I will suggest having the position of these two left and right buttons respond to the image/contents max-width, and not the browser’s width. Something like a margin-left: 3% and a margin-right: 3% will do.
Not to belabor the point any more than it has to be, but comeon people, let’s be weary of these subtle UI/UX things.
Last weekend, I entered a hackathon competition as a team with three developers. This was my first hackathon. We did not win, but it was fun and taught me a few things about workflow, project management, and teamwork.
On the team, aka “Stewie’s Friends,” there was one back-end developer, one front-end developer, and one front-end/UX developer. My role on the team was the designer, in charge of the product’s layout, look & visuals, and overall usability. We also had a market researcher as side support.
The most notable problem: It happened on the first day. We agreed upon a product idea beforehand, but three hours in, our researcher informed us that the product we want to make HAS ALREADY BEEN CREATED, right down to the user flow and features. Needless to say, we were demoralized. Fuck.
Our idea was to create a service where you can ask for items from far destinations to be delivered to you. An example would be asking for some macadamia nuts from Hawaii to be brought to you in San Francisco. Since someone will probably be in Hawaii going to SF, they will get it for you, and you pay them back. You can also send stuff, like if your sister left her t-shirt at your house, and you need it to get back to her in New York quickly. Our intentions was not really to make profit, just mostly for karma points. Too bad it already exist in http://mmmule.com
Three hours of planning, strategizing, sketches and diagram making, down the drain. In hindsight, we should’ve felt pretty good about ourselves, since we came up with an idea and strategy so quickly, and the mmmule site we didn’t know we were ripping off probably took wayyy long to make.
The great thing about this happening, was we picked ourselves back up quickly, and repositioned the concept. The new idea is to be able to get things sent to far away distances for a less expensive way, by letting verified couriers bring it with them. Here’s an example, you need send your nephew a skateboard late minute for his birthday. He lives in New York and his birthday is a three days. Speed delivery is expensive, so you need an alternative. What if you can pay a trustable average joe, someone who is planning to fly to New York anyways, to bring the skateboard to New York with them? Your nephew’s dad can meet the guy at the airport to get the gift, and all will be well (and that person gets paid). That’s our new idea and we stuck with it.
Anyways, back to the hackathon itself. It went more smooth than I anticipated. Everyone knew their roles, and trusted each other to do their best at their respective roles. Of course, things come up in the product’s process from getting to Point A to Point Z, where more intense discussions and points were made, but through clear discourse, solutions were found.
I’m not sure if that is how most professional work environments work (not in my professional exprience, at least), but this was great— Discuss with everyone, discuss with inner group (in this case, the UX & Design guys), trusting each individual to not suck, then discussing with everyone again— man, we can start our own company if we had someone who can manage and bring in clients.
Everything went well: product was built, fun product names were made, unhealthy food was eaten for days, and now, a user can get to the start to the end—where you get your package delivered. The last obstacle in this hackathon, was the pitch.
In hindsight, we should’ve spent more time on the pitch. Since no one had expertise in this area, the discussions about what to say in two minutes got intense. Not many agreements, but agreements had to be made since we were short on time.
Then it came time for the pitch. We chose our most coherent teammate to be the sole speaker at the table of two judges. In my opinion, the pitch went well. The judges look like they’re comprehending our product idea while we were demoing the website. I suppose we could’ve done more to be interesting in the pitch, like add a couple of jokes within our pitch, just to make it more memorable.
We went out to the celebrate inbetween waiting to see who makes it to the next round of judging. We came back, find out we did not win, listen to a couple of finalists speak about their product, then left and celebrate some more. Of course, when I say celebrate, I mean booze at the bars.
Things to take away from this Hackathon:
- Well, I definitely need learn and use SASS. Since hackathons are limited to a few days, styling details are, and should not be a top priority. I know html/css, but since everyone is all up in Rails, I can’t really go and add some css3 box-shadows and margin-left negative five pixels without disrupting everyone’s workflow.
Also related, gotta use github more to push & pull more (that’s what she said).
- We didn’t make any of the finalist spots, but I did notice that the finalist projects that were chosen revolved around iPhone apps or self-containing products (our product required human interactions/crowdsourcing). Next time, that will be the kind of project we need to focus on making if we want to win.
- I came to the conclusion that in hackathons, the visuals (and perhaps even userflow) don’t matter too much. Yeah, my role probably was not too important for this project, but appreciate the team for feeling otherwise. Judging from the chosen finalists projects, they all do lack pleasing aesthetics to the eye, BUT their products definitely look like there was a lot of code created in two and a half days.
Willing to do this again. Will do this again. WILL WIN.
This reminds me of that inane exercise where some student or bored designer “re-imagines” a movie poster usually by simplifying the hell out of it. What’s never added to the oohs and ahhs is that viewers have a history of seeing that movie and are very familiar with the important part the designer is calling attention to. If you saw the same poster without seeing the movie it would tell you nothing.
Same with these. We all know what they are before simplification. Try this effect with a new logo and see how it flies.
And what the hell is with the descriptions below? “Oh my teacher didn’t think people would know what the little bird was representing”.
—Cooper Black - commenter on this design exercise
If you scroll down your Tumblr feed for a bit, you would notice that the back-to-top button appears on the top right corner of your browser. Very useful button, but does not adapt well for large monitors.
On my Macbook Pro (1440px wide), I can reach that button without thinking much about it. But when I’m scrolling through my feed on my 23-inch monitor (1920px wide), that button’s location becomes more of a chore than a helpful shortcut.
There are a few solutions to this slight problem: set a @media for the button to change locations depending on screen sizes. Or perhaps change the fixed width of the news feed to respond to screen-size (again with the @media).
The best, quickest, and easiest way to solve this problem would be to just place the back-to-top right closer to the news feed. In the screenshot below, I placed it in the lower right of the feed. This way, the button will be there no-matter how big or small the screen size.
Get on that, Tumblr.
I’m not the biggest fan of Youtube’s UI and layout, but I’ve just noticed something that they did in their video player that I like.
Lets say you are viewing a very long video, think an hour or more. Those movies take a long time to load, and depending on the type of video you’re viewing, you might want to move forward in the video timeframe by a minute or two. Since you know there is a fixed width to the Youtube video player, how would you scrub past the intro credits of a two hour movie? Well, Youtube thought of something, see below:
Yep, that is a second (and larger) time bar that appears on top of the original timebar. This secondary bar is a zoomed in portion of that particular timeframe you are hovering your mouse on. It might look a bit dull in the screenshot, but it’s actually quite intuitive and not distracting at all. So for once, a tip of the cap to you, good sir [Youtube].
Postscript: Don’t ask me about the video in the screenshot, you won’t understand (nor do I).
Spotify is a program that lets you listen to a wide selection of music. There is a free and subscription version available. In the free Spotify, you get ad banners and voice advertising between every few songs. Sounds like a good idea, except these voice ads seem to be getting more grating on purpose.
An example of the annoyance would be the Trojan condom voice ads they had running the the second half of December 2011. The ad itself was not bad, it was your usually Trojan condom voice ad. The problem was it was the ONLY ad I heard on Spotify for TWO WEEKS.
I use Spotify everyday, hours on end. I know it was a slick strategy on Trojan’s part to target the ads at the end of the year, since New Years was coming up and chances were that a lot of people using Spotify were going to have sex on that night. If they had a series of Trojan ads, that would’ve ease the annoyance, but they had the exact. Same. One. Every. Single. Time. Joke is on you Trojan, I don’t even remember what the ad is about!
Another annoying thing about Spotify voice ads (and ads in general) is how much louder that they are than the songs I’m listening to. Because some ad exec somewhere probably assumed that when I’m listening to mid-tempo songs at night, that it’s the perfect time for them not only to turn up the volume, but the compliment it with a screeching chainsaw sound and people screaming in a voice advertisement for yet another [probably terrible] remake of the Texas Chainsaw Massacre (this time in 3D!).
Lastly, a lot of the times, the ads don’t seem to be specifically targeted, which can cause for some awkward moments if someone happen to come across my vicinity. For example, when I’m listening to Wu Tang or some other rap music, why is Spotify trying to recommend me listen to some teeny pop singer’s new album. If I’m listening to electronica or indie rock, why ask me to check out the new album of a country artist I’ve never heard of?
Fix yo strategy, Spotify. Thanks.
Just want to lay some of my thoughts relating to the 2012 social products out there and how I’m using them. I’ve also included some hyperlinks within the post. Without further adieu, here are my thoughts:
Facebook: Still the top dog on the web in terms of usage from the businesses and people I “friend,” even though not much has changed in terms of UI. They still are screwing with the privacy settings every chance they get, but that’s kinda Facebook’s M.O.
I think Timeline came out in 2011, but I think it’s been out long enough now to say that it’s pretty useless for me, the semi-regular user. I feel it works great for fanpages and businesses who have lots of daily content. But for the me, I do not see the need to even look at anyone’s timeline. Perhaps the judgement of Timeline comes when in 10 years from now [assuming that Facebook is still relevant], people will look back and conclude if it was a useful time capsule or not. So far: NO IT IS NOT.
Twitter: I’ve noticed that I’ve been using/visiting Twitter less often. I find that the real people I follow post very seldomly (except for cross-posting instagram pics), and that I use Twitter nowadays to follow parody accounts, businesses, bots, and other people I have not met in real life. Still, Twitter is useful to see what’s trending in the world, sports, and funny hashtags (e.g. #endoftheworldconfession).
Instagram: I must say, I’m late to the Instagram hype, but I’ve started using it halfway through the year. It is now my favorite product out of this whole blog post at the moment. It works really well for following art & design related things because the people on Instagram likes to show their project process, the finish project, workspace, and their respective personalities. I feel that Instagram is better than all the art & design sites out there (e.g. Behanced, Dribbble) in terms the projects feeling honest and authentic. I guess the only downside is that you can’t really see hi-res images, as the current Instagram desktop site UI does not encourage exploration. Fyi, was bought by Facebook so expect more slick privacy ninja attacks.
Pinterest: Supposedly Pinterest is a force to be reckon with. I really don’t see it, but then again I am not the target audience who uses it as a shopping-related tool. Instead, I use Pinterest to bookmark cool / inspiring / art & design / photography images around the web, so that I’d have a place to keep in the “cloud.” Continue to do yo thang Pinterest, and I’ll keep using ya the same way that I’ve been.
Tumblr: Animated gifs. Sure, I use Tumblr for this blog and I also follow some art & design stuff, but really—animated gifs.
YouTube: I’ve voiced my opinion about the YouTube UI before. I don’t know who the designers at Youtube are, but I do not like them. They change the UI constantly in an inconsistent, “LET US AGILE SYSTEM CUZ IT’S COOL” style. They really need to work on letting the individual users organize their playlists better.
Google+: Apparently they’ve grown over the year, but I still do not know anyone who uses it. Quite sneaky of Google to force Google Reader users (me) to use the Google+ “like” functionality. Google+ does seem to have some niche communities on the site, but you might as well use Reddit if that’s the case (note: I don’t use Reddit or Google+).
Myspace: So it’s not officially out, but they got invited members using it since early December, and I’m one of them. I like that they took the best UI features from many of the popular social sites and merged them into one place. The biggest problem I have with it so far is that it’s a dead zone. I don’t really care if regular joes aren’t active on the site, but at least have the artist [or their PR team] update their artist page everyday. I also do not find the current system recommending any music/related artist, which is a big deal to me. We shall see how 2013 goes for Myspace.
Short thoughts: dribbble—seems like a circle jerk most of the time, doesn’t seem like there is any critiquing being done; UI/UX hasn’t really changed all year. I would like them to make some of the images bigger. With that aside, I still haven’t figure out how anyone gets an invite without literally asking someone for one. Behanced—great work but I’m not drawn to be on the site too often. Perhaps their comments lacking any real discussions turn me off. Comments like “Great work!” and “Amazing!” is similar to the dribbble circle jerk comments. DeviantArt—no idea why I still visit this site after almost a decade of visiting it. Flickr—stagnant since 2007, yet I keep coming back from time to time, hoping for a major UI/UX overhaul. LinkedIn—pretty sure it’s useful for the 24/7 job hunter and recruiters. But for the rest of us, it’s just another website to click “accept connection request.” Also, their new endorse feature from earlier this year is pretty spammy. Kickstarter—I like that they’re trying to crack down on prototype renderings. Overall, I’ve been using Kickstarter to buy physical products, rather than giving people money for less tangible things (such as making albums, movies, cross-country trips, etc).
Well that’s it for 2012. Here’s to 2013. /END
I was looking for a mac app to analyze my hard drive’s storage space and came across DiskWave. From the article I was viewing about hard drive visualization apps, DiskWave seemed like an app I’d try, so I went ahead to download it.
..annnnndddd I can’t find the download button.
I look for the button in the usually places: the navigation bar, the first text section, the bottom of the page, and then the sidebar.
I proceed to my last resort when I can’t find something, which is to command-f and then type in the word “download.” I get the result I’m looking for.
Turns out, the button was in the sidebar all along, right under the big DiskWave icon.
The button placement might seem very obvious in the screenshot attached to this post, but keep in mind that I was quickly viewing this webpage on a 1440px with the sidebar not in the center of the page. I’m not sure if the developer strategically chose to give the download link a low visual hierarchy, but here is why I consider the link “hidden” in plainview:
Paypal button: This is what I noticed first and foremost in the sidebar. It is the brightest color and the most stylized element in the sidebar. After seeing this, I innately dismissed the download link being in the sidebar. Me [and most people] would assume that the call-to-action would be to download the app. But for this web page, it seems that the developer wants the viewer to donate some money for the app (understandable).
If that’s the case, I don’t think emphasizing the donate button before I’ve ever used the app is going to work that well. Why should I donate when I have not yet experienced the [possible] greatness of this app? A better option would be to have the donate option be embedded in the app’s GUI.
The secondary elements are also distractions from the download link—the big icon, the credit cards, the Facebook “like” div, and the MacUpdate star rating. The download link is just a line of text (with no a:link text-decoration css styling). At a quick glance, the download link looks like a text caption for the DiskWave icon.
In closing, I would like to say that this webpage is subtly sneaky in a non-malicious way, unlike those download sites (like mediashare or rapidshare) who allow advertising banners with “download here!” button graphics. Also, the DiskWave app works well for my needs.