Must Read UI / UX Related News 2014

Last update: January 28, 2014

In this post, I will put a collection of interesting UI and UX design news, updates, trends, whatever I've found on the internet. I will include the link to the actual article and also a short overview of what's in there. Some stuff might be overlapping, which is actually good showing that multiple sources agree on the same things. The list below will show the most recent article at the top and has no particular order in terms of relevance or ranking. I will keep bumping this post whenever I update it. If you come across any interesting articles feel free to send me a message at [email protected].

7 unbreakable laws of user interface design

  1. Law of clarity
  2. Law of preferred action
  3. Law of context
  4. Law of defaults
  5. Law of guided action
  6. Law of feedback
  7. Law of easing

Should I Use A Carousel?

So...Should I...? Funny little website explaining why you shouldn't use one for your website. Here's an article on CreativeBlog with an in-depth interview with the creator Jared Smith.

12 Outdated Web Features That Need to Disappear in 2014

  1. Irrelevant Elements
  2. Flash Intros
  3. Photo Carousel
  4. Large Hero Images
  5. Stock Photos
  6. Animated GIF Flags
  7. Autoplay Videos
  8. Automated Popups
  9. 'Hello World' Blog Post
  10. Sidebars
  11. Reloading Pages
  12. M.dot Sites

14 Design Trends for 2014

  1. Theming Apps
  2. Color as Affordance
  3. Layers and Depth Within Apps
  4. Parallax
  5. Blur. Lots of Blur.
  6. Experimenting with Transitions
  7. Importance in the Details
  8. Content Impermanence
  9. Single-Use Pages
  10. Browser's Integration with OSes
  11. Physical Products Coinciding With Apps
  12. The Full Experience

Goodbye to 8 Design Elements Whose Time has Come

  1. The Drop-Down Menu
  2. Carousel
  3. Internet Explorer 9
  4. Skeuomorphism
  5. Flash
  6. Web Pages
  7. Shared Hosting
  8. “m.” Sites

Annoying Razer Synapse Updates

Ever since I installed Razer Synapse (Cloud-Based Mouse Driver) for my DeathAdder mouse I get very annoyed by the software updates. First of all, 99% of the time the update will require you to reboot your system which no ones likes. Especially when you just booted up your computer. Second, the windows where you confirm the update installation is pretty stupid as well.

The image below is the default state in which the notification was presented. The "Update Now"(OK) option comes before the "No Thanks"(Cancel) option. Now there's always the debate whether the button arrangement should be "OK-Cancel" or "Cancel-OK". Both button orders are legitimate as the Nielsen Norman Group article points out, but what confused me was the button highlight. While updating the driver would be considered a "dangerous" action. I was immediately drawn to pressing the highlighted button, because in most UI cases they will highlight the option that they want you to press. So combined with the "I-just-want-to-get-this-over-with" mentality, I pressed the highlighted "No Thanks" option thinking it was updating when the window minimized to the system tray. Little did I know the update notification popped up again the next day when I turned on the computer... confused and enraged why Razer Synapse asked me to update again, I then discovered I was pressing the wrong button when I saw the update window for the second time. Am I raging about nothing? Or maybe I should just learn to read next time :(

razer-update


YouTube's Player Size Button is Back!

youtube-playerbutton
Hooray!! The YouTube player size button is back! A couple a days ago YouTube got a major update (Google+ comment integration) and it seems like they moved the player size button back to the video menu bar. In their previous update the player size button was moved and nested inside the cogwheel button. This was a huge pain in the ass since it required an extra step to perform an option that was very frequently used (you can read about the design and interaction analysis in my previous blog post).

Luckily, YouTube decided to put the player size button back on the video menu bar. Did they get too many complaints or did they just realize it was a horrible UI design choice? Anyway, hopefully they will put back the video quality button back is well haha.. To close this post, I would like to include the sound clip from Super Smash Bros below to celebrate the return of the video size button :)

 


YouTube's New Video Player UI


You've probably noticed the subtle change in the YouTube video player UI implemented a few days ago. They moved the "Player Size" and "Video Quality" buttons and incorporated them into the Cogwheel button. Their goal was to make the video player UI more compact and they've achieved that doing so.

Personally, I hate the new UI... not because I hate change, but because they moved the 2 of my most used buttons and nested them within another one. From an interaction standpoint the previous UI was simple:

  • Set to Player Size: (1) Press Player Size button
  • Change quality: (1) Press Video Quality button, (2) Set desired quality

Now with the new video player UI I have to perform an extra interaction in order to change the screen size and video quality:

  • Set to Player Size: (1) Press Cogwheel button, (2) press Player Size button
  • Change quality: (1) Press Cogwheel button, (2) Press Video Quality button, (2) Set desired quality

One extra interaction doesn't seem much, but for me and I think for a lot of other users it's an annoyance. Also, visually the new Player Size button is a bit weird. It looks like a toggle switch but it acts as a slider. I get confused sometimes thinking the "darker" side is the active one.. it's actually the other way around. To make it more intuitive and clear, there's a simple fix simply by adding a more distinctive rounded corner and by adding a drop shadow to the activated side.
youtube-ui-slider


Outlook.com's UI Inconsistency

I like Outlook.com (revamped Hotmail), but there's an inconsistency in the Outlook.com's user interface which kind of bugs me. When switching from the inbox to the junk page, the "Delete"-button shifts to the left. If I'm in a hurry deleting emails from my inbox and junk, switching between the pages will cause me to accidentally pressing the "Archive"-button when I actually want to delete the email. Also, there's the weird categorization where they put the options to flag the junk mail message as "Phishing scam" and "My friend's been hack!" under the button "Not Junk"... Isn't that the opposite?
outlook-inconsistency
They could have move the phishing and hacked option under a new tag called "Phishing" for example, and place it left of where the "Delete"-button is. This way it shifts the delete to the right making everything more of less aligned and consistent with the Inbox UI.

outlook-inconsistency02


Industrial Design in Today's World

A short documentary from Frog Design about the digital technology advancements and how it impacts the modern world industrial designer. Feels like I should have done more with the physical space when I was still in undergrad... possible future goal?

http://vimeo.com/69897436


Arduino Basic Connections - Very Useful Electronic Circuits

Arduino forum user pighixxx posted these very useful and informative Arduino electronic circuit cards. The cards tell you what kind of components you need and also how to hook things up. Below are some sample images of the Arduino Basic Connection cards. You can find the forum post here and the link to the download page here.


Testing Substance Designer 3.5

I found out recently that my Digital Tutors account from the ETC is still active, so I decided to do some tutorials on Unity3D and 3dsMax while I'm sitting here at home. It's going pretty well. Nothing to really show yet on Unity or 3dsMax, but I stumbled upon the Substance Designer software when I was browsing the tutorial list and decided to check it out. Substance Designer is a texturing tool which allows you to create high quality textures using nodes. It comes with a bunch patterns and filters and the software allows you to pack all your texture maps (diffuse, normal, specular etc.) into a single Substance texture file. On top of that you can connect the Substance textures with Unity3D or UDK and dynamically change parameters of your texture within the game engine. The software is really awesome so far. I can't wait to get more proficient with modeling, so can create kick ass textures for them :D

Below you can see a quick test using Substance Designer. I made a brick texture within Substance Designer with a normal and specular map and added a sketch of mine on top of everything.

substance01

substance02


View PSD & TGA Files in Windows Explorer

null

Want to be able to view .PSD and .TGA files as thumbnails in your explorer? Download the MysticThumbs software, install it, restart your system and BAM!

- x86 Installer (32 bit OS)
- x64 Installer (64 bit OS)

Source: http://tbxstudio.com/psd-thumbnail-viewer-on-windows-explorer-for-windows-7-vista-64/


[How] Play MKV Files on Mac

Me and Lauren wanted to watch the Legend of Korra on her MacBook that was linked to our tv, but we couldn't play it because the file was in MKV format. QuickTime doesn't natively support MKV files and installing a DivX player didn't help either. DivX player did playback the video, but there was no audio and it kept showing a message about an AC83 decoder being missing. Perian, on the other hand, is a powerful QuickTime extension, which allows playback of video AND audio without any problems. So download Perian for all your video playback needs on your OSX!