Skip to content
Hallway
0:00 / 0:00

#voronoidiagrams#uialgorithms#dropdownmenus

Mark DiMarco: User Interface Algorithms [JSConf2014]

JSConf

286K subscribers • 28 videos on Hallway

YouTube
  • Recommended by 4 people: 4 on Hacker News.
  • Presented by Mark DiMarco
  • May be out of date. Uploaded 12 years ago, in an area where tools change fast.

Intermediate. Assumes working knowledge.

52K views12 years ago4 recommendations

Web developmentComputer scienceJavaScriptAlgorithms

Mark DiMarco explains the mathematics and algorithms behind common user interface patterns, such as predicting mouse intent in dropdown menus and finding nearest targets.

Even something as simple as a dropdown menu or a bar graph can introduce usability problems. From a slide out menu disappearing when a user's mouse moves a few pixels too far, to requiring NASA-like levels of precision to mouse over the right element, there are algorithms already implemented in Javascript to help us overcome these problems. If an algorithm is defined as "a step-by-step procedure for calculations", let's visually break down those steps for 2 different non-trivial algorithms and explore how these algorithms are applied to some standard & everyday user interface patterns. We'll first look at an algorithm for predicting a user's intentions by calculating mouse speed and direction, and then tackle determining hit state for hundreds of non-uniformed, variably sized and placed UI elements. Slides: markmarkoh.com/jsconf2014 2014.jsconf.us/

Why it's here

4 people recommend this

What people say. Recommended as a fascinating look at how algorithms like Voronoi diagrams can solve common frontend user experience challenges.

scrollawayon Hacker News • Recommends

On “How Does One Create A Gtk+ Application?”

Am I correct thinking you are talking about this bug? link If so, then yes they are aware of it and treating it as critical. Edit: Reading into this bug is so cool. This video was linked from it, fascinating stuff: link to this video
View on Hacker News

dkannanon Hacker News • Recommends

On “Mapping Migration in the United States”

Mark DiMarco gave a talk at JSConf 2014 called User Interface Algorithms which touches upon this link to this video relevant section starts at 4:13 rest of the talk is good as well
View on Hacker News

cipher0on Hacker News • Recommends

On “Show HN: Piste.io”

Great work! It might be cool if you could use voronoi diagrams to select the closest path to the mouse's position like the NYT did 0 because without really zooming in, the lines on some terrains appear to be very thin which makes hovering over a specific one a little harder. There's also a great talk that discusses this from JSconf2014 1 0 link 1 link to this video
View on Hacker News

jsteenkampon Hacker News • Recommends

On “Ask HN: The Case for the “Front End Engineer” Role”

I think you make an excellent observation that FE is a system engineering challenge. Algorithms do play an important role as you can see in this great presentation by Marc de Marco ( link to this video ) However I think it's fair to say most FE engineers apply existing solutions and the system design is a bigger part of their role. I differentiate between UI Engineering and Front-End Engineering. The former emphasises design integration (pixels) and performance (rendering). The latter is broader scope and emphasises the systems engineering. Both have to deal with system design. UI is about components and messaging across the components with the front-end application being the "system". FE is about comp…
View on Hacker News

u/SouperSausagein r/compsci • Mentions

On “What are the best youtube lectures on computer science?”

Mark DiMarco: User Interface Algorithms JSConf2014 link to this video
3View on Reddit

gorhillon Hacker News • Mentions

On “Pointer Pointer”

Look beyond the funny app. Think of the challenge of finding an efficient solution to the original problem regardless of its "unseriousness": finding the optimal picture according to pointer position. Same solution is also useful for other more serious applications: link to this video Edit: Sorry, I missed the "me" in your "entertain me".
View on Hacker News

currysausageon Hacker News • Mentions

On “Show HN: Mimicking the Bloomberg menu widget without JavaScript”

The original implementation at bloomberg.com is really well-executed, even solving the famous problem that when you accidentally hover another menu item while moving the cursor to the right, you might activate the adjacent menu item. 1 It took VLC ages to get rid of this issue, but it is solved as of VLC 3.0.3 (relevant Qt bug: 2). 1 link to this video 2 link
View on Hacker News