The UX of grid-based applications

[rknLA]

would you mind terribly much if I used the phrase “an onion of affordances” as an album title?

Ha, nope, go for it

Although I do admit wishing that the launchpad pro’s circular buttons were pressure sensitive and reassignable

It continues to blow my mind that hardware manufacturers still don’t provide a mode to make everything assignable. Launch Control XL gets close with the User/Factory buttons, but there’s not a mode to make those buttons themselves assignable. Onions and fractals.

[andrew]

bump bump. @jasonw22 did you get any further with the ux doc standard? I feel like the image from new mlr docs might be a good jumping off point now, it’s simple and conveys things pretty well.

[andrew]

my iteration

[jasonw22]

Alas, I did not. Apologies! Looks like you’re on the right track though.

[rycolos]

These are great. What are you doing them in? I’d love the files for my own purposes if you’re willing to share.

[andrew]

Adobe illustrator because my graphic design training has brainwashed me. I can share that or just an svg

[rycolos]

I’d love the AI file

[spunoza]

I would also really like to get my hands on some grid templates.

I posted some UX graphics for my first Norns application to code review last week. I don’t love how they look and I’d much rather use a standard grid UX template. But I’d be interested to get some feedback on these diagrams and whether they were useful for navigating the app.

[andrew]

when I get a minute I’ll make an svg doc will all the separate elements I used for this, they’re pretty simple and just image-traced from mlr

[alanza]

if you accidentally make Inconsolata (I think?) the default Grid-UX font, I will be quite amused.

[andrew]

oops spreading my #brand too far

[sam]

Has anyone on here made (or considered making) a 16x8 grid rubber stamp…?

It would be nice to stamp grids into notebooks for designing UI.

From the limited research I’ve done, 130mm x 90mm is the biggest you’d want to make a stamp (see largest inkpad size). Though that would be pretty perfect for use on A5 paper, or as a full page in Field Notes notebook. Only problem so far is the cost of getting one that size…

[ground_state]

Sorry to necro this, but I think it’s interesting enough

I do admit wishing that the launchpad pro’s circular buttons were … reassignable

hardware manufacturers still don’t provide a mode to make everything assignable

Programmer mode (hold the “setup” button, tap the orange key at 5, 1 [1]) on the LP Pro allows using all of the buttons/LEDs. The only thing which can’t be accessed in any way is the side LED - which indicates which mode you’re in.

Novation have actually gotten some pretty good press due to the hackability of the Pro.

[1] 1-based

[alanza]

[1] 1-based

I love that your footnotes are 1-based even though you roll your eyes xD

[ground_state]

In my experience, at least, human-only text docs are 1-based. Machines seem to prefer starting from 0… ¯_(ツ)_/¯
Of course, YMMV

[Oootini]

@jasonw22 could you share the grid template you described above please? It looks great - Perfect to sketch some ideas. Thanks.

edit: nevermind, attached a pdf with templates for each grid size
grid_templates.pdf (104.0 KB)

[barnaby]

Just saw this grid rubber stamp idea and decided to make one, as I have access to both a laser engraver and CNC machine. I’m trying to come up with a design. I think optimising for the having large button graphics is preferable to recreating the grid proportions, to allow for writing a couple of characters or small symbol inside each 6mm square.

One thing I’m not so sure about is providing orientation markings, either row/column numbers on the sides, a small cross or lines to mark the middle, or none at all. Of course the grid itself has none, but when playing a grid you at least have the UI to orient yourself, so perhaps additional orientation markings are justified when starting from a blank slate and designing the UI itself. On the other hand, designing a UI with orientation markings in place could lead to unintentionally creating UIs which are hard to use without the markings… any ideas or preferences?

[sam]

I reckon it’s easy enough to add any extra marks in with a pencil if you need them.

I think you’re right about not trying to create a mini version of the grid. Though it feels like having gaps between the buttons is important if space allows it.

Having bevelled buttons would make it feel more like a Monome Grid, rather than just a grid. I’m also not sure if you need an outline for the whole grid, I rather like the idea of a floating set of 128 buttons. This is all completely subjective of course… and not knowing that much about stamping (apart from the stamps the kids have) I’m not sure what works with respect to line widths, etc, etc.

What size of ink pad are you aiming for?

[andrew]

not rlly a template but I guess I’ll throw in the .ai file I’ve been copying every time I make one of these

anachronism _ docs.ai (314.7 KB)

[barnaby]

Here’s the first version of a grid rubber stamp, and the first stamp I’ve ever made! It was a fun learning experience.

I’m not sure if the ink pad I brought is low quality, not suited to the material or just needs working in, but it’s producing very mottled results. It also bleeds noticeably through thin paper. Due to the size of the stamp, (about 120 x 66mm) I’ve also had best results using the older rubbing method, where the stamp is inked, placed upright, and the paper placed face down on top and rubbed on the back, allowing for good pressure coverage. Unless I can solve this by making the face of the stamp block slightly domed, this might limit how useful such a stamp would be.

If people like the idea and want to try it out, I’d be happy to make a small batch of stamps. Let