Looking for inspiration

Looking for inspiration
0

#1

Okay #100DaysOfCode and #freeCodeCamp family, I am like Sylar - on a mission to steal the talents of the best #herodevelopers!

Who are your sources of inspiration for:

[0] #ui #ux #design #css
[1] #JavaScript
[2] #designpatterns
[3] anything else I need!

Thanks in advance!

I posted this on twitter under @mrjaypeasmith but no one replied (!) so I’m hoping for a better response here :slight_smile:


#2

design: Edward Tufte.


#3

UI:

Bret Victor (n.b. this is one of the best things ever written on the subject of interaction design and graphical interfaces)
Bruce Tognazzini
Luke Wroblewski
Sara Soueidan

This HN comment (sorry, formatting will be wiped out):


Here’s some rules that almost every designer I know ignores:

  • Map out your interface and interaction trees first

  • 1-click - most common actions

  • 2-clicks - second most common actions

  • 3-clicks - power user level stuff

Put the most commonly used stuff at 1-click or interaction. If you don’t know what goes at 2 and 3 clicks in, you don’t understand how the application is used, because you don’t understand what the most common interactions are. If you’ve run out of room for the 1-click stuff in your UI, then your UI concept is poorly designed. Keep iterating and collecting information until you can fulfill this.

  • Don’t put anything at more than 3 clicks in.
  • Double the number of interaction points in the UI. Assume the application will grow and add features. If you optimize your design for the number of features you have today, you’ll have no where to put all the stuff you’re going to get over the application lifetime and it’ll all just end up getting buried in menus. I’ve seen lots of gorgeously, carefully, designed applications die a year in because of this.

Double everything and see if that number of interaction points still fits within your concept, that way the interface has room to grow without getting messy.

  • Don’t make your users interpret, make them understand.

If your concerned about how universally an icon is interpreted across cultures, you’re doing it wrong. Interpretation is an additional step your users have to go through to use your UI, it’s like putting everything at 2, 3 and 4 clicks in because they now have to not only look and scan the UI for what they want, they need to figure out what each interface item means before they can interact with it.

Even worse, as they grow to become accustomed to your UI, they’re going to end up memorizing location and placement of options because the interface widgets take too long to interpret. Get 2 revisions down the road and you move a button and wham your tech support calls jump 50% because the users never bothered to remember what the symbol for their action looked like, just where it was on the screen.

Everything must be discoverable. This is why the world moved to GUIs from CLIs. Don’t make your users play a 1990’s era adventure game where they have to click every pixel on the screen to see if they can advance their usage. The Flat UI trend is notorious for this.

  • Consistency rules. Also see #3.

Eliminate Steps. Map out how many steps certain actions are. Cut them down to as few as possible. I remember one time going through a file import process with a tool, by the time you got the file imported the user had to navigate 27 different steps! Almost every step required minimal or no user input. Nobody had ever bothered to map out the interaction patterns in the tool before but users were constantly complaining about how difficult it was to use.

We reworked the workflow and got it down to 3 steps and user-engagement jumped triple digits.

  • After you’ve addressed 1-6, make it look nice.

#4

I love this @DanCouper! Can you provide an example where all these rules are followed? Please.


#5

Off the top of my head, not a specific example, but most really good apps - the comment was written by someone on hacker news in response to this article - https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda?hn=1 (which is really excellent as well), and I just keep a copy of the comment to reference every time I design things, it’s absolutely spot on


#6

Ok thanks! I’ll bookmark it. Strong advice! UI/UX is not my forte. I need all the advice I can get.


#7

Thank you @DanCouper - this is gold!