6 ms·
How to tame a user interface using a spreadsheet
- tracker1 1y agoNothing wrong with something that works... I used Balsamiq for years for this type of thing, but to each their own. Note: not a fan of Balsamiq's current rent model... I bought a long time ago when it was < $100 for a regular license/download. Been a while since I used it.
- stronglikedan 1y ago> Note: not a fan of Balsamiq's current rent model... I bought a long time ago when it was < $100 for a regular license/download. Been a while since I used it. Me too, which is a shame, since I've found nothing that beats it's simplicity and speed of idea-to-wireframe.
- skydhash 1y agoI have a balsamiq license, too. But I just bought a whiteboard, and in addition to helping me with diagrams, I’m hoping to create wireframe on it too. I will snapshot iterations with the phone camera.
- treetalker 1y agoAs an appellate attorney, when I'm dealing with my own legal writing or someone else's, I similarly break it down into the mental models of layout, structure, content, style, and the tools/software used to work with the documents.
- lesinski 1y agoI love to use spreadsheets for prototyping too! 1) moving around a spreadsheet is very fast and lightweight 2) it forces you to think about layout first, before getting into imagery, colors and design
- msephton 1y agoExactly! It's hard to beat the speed of cut and paste between cells.
- xnx 1y agoThe overall effect of Figma is probably net-negative because people start futzing with the visual/aesthetic aspects of an interface instead of working out the functional aspect as you would in a low-fidelity/paper/wireframe prototype.
- skydhash 1y agoFigma can work, but you have to restrict yourself to not embellish the wireframe. Choose one font only and use basic shapes only. Use colors only if you must (warning states, primary actions, …)
- bigiain 1y agoI really like/use Balsamiq. Although perhaps in a not common use case. I'm really bad at doing neat pencil sketches and handwriting. Balsamiq easily lets be draw something up on my computer that looks obviously like it's "hand drawn style" and make is clear both to me while creating wireframes and to everyone else when I shard them that it's not intended to be high fidelity. I intentionally use Comic Sans to emphasize that. If I were better with a pencil, I'd do these in a notepad or on graph paper - and then share phone camera photos of them. F<or anyone who's ever died a little bit inside when their PM/boss say "Those wireframes are perfect. lets just hand those off to the devs!", I _highly_ recommend using whatever tooling or personal restrictions that workj for you - to generate output that is clearly "interface ideas" instead of being misinterpreted as "finished UI/UX designs".
- jasonjmcghee 1y ago> perhaps in a not common use case > Balsamiq easily lets be draw something up on my computer that looks obviously like it's "hand drawn style" and make is clear both to me while creating wireframes and to everyone else when I shard them that it's not intended to be high fidelity. I thought this was the core value proposition of Balsamiq.
- throwaway7783 1y agoI love Balsamiq too and have been using it for 7 years now. For me it's the best way to define a product requirement, and share product ideas.
- pdyc 1y agoi admire the people who are able to bend the spreadsheets to their will while i struggle with creating simple charts with it! i even created my own tool to create charts from it because i found spreadsheet interface overwhelming.
- throwaway127482 1y agoI love spreadsheets and use them a ton but I have to agree, creating charts is hard
- zkmon 1y agoI have used spreadsheets for designing floor plans and building elevation etc. I used each cell to represent 3 inch by 3 inch area. In more detail views I used each cell for a square inch area. Spreadsheets (specifically Excel) are the most general-purpose end-user software I have ever seen. I saw people using it for art/painting. Someone used it for demonstrating graphics shaders and ray-tracing.
- zavec 1y agoReminds me of somebody discovering their grandma referred to excel as "the knitting program" because she used it to mock up knitting patterns or something like that
- msephton 1y agoNow that's what I’m talking about! Nice work. You can even play a flight simulator or doom in them.
- bayindirh 1y agoMy favorite tool for that kind of precision work is OmniGraffle. It can create label sheets and technical drawings with ease. The page [0] doesn't show it, but it can draw with millimeter precision for technical drawings. [0]: https://www.omnigroup.com/omnigraffle/ https://www.omnigroup.com/omnigraffle/
- eviks 1y agoCan it sum up total width of your visual elements in a floor plan?
- Xss3 1y agoI've used it for designing never ending platformer game. An excel file determines zones where the next platform can be generated relative to the end of the current one. Blue cell is the current platforms end, green cells are easy places to jump to, yellow medium, red are hard. Makes it very easy to adjust difficulty. Want hard mode harder? Reduce the amount of red squares to only the hardest jumps. Want it easier? Colour some of the yellows in red. Etc.
- rglover 1y agoThis is quite brilliant. Good read!
- msephton 1y agoOP here. Thanks for your kind words!
- chatmasta 1y agoI’ve never used spreadsheets for prototyping but I’ve used slides. Those have a grid system too – you just need to toggle its visibility and enable “snap to grid.”
- msephton 1y agoOP here. Yes indeed! I mention the use of Keynote in the blog post. For me, it’s good but perhaps too high fidelity for my particular use case of figuring/carving out sections of the screen.
- efortis 1y ago~2008 a friend at a consulting co. showed me how they drafted UIs in Excel. Having seen that, in 2015 I began working on a UI drafting software for that kind of technical designers. We ended up getting rid of the layout thinking overhead while drafting. They call it Content-First Design. If you'd like to try it it's free: https://uxtly.com https://uxtly.com
- ynrfin 1y agoHi, I am interested in this tool but I could not even grasp how does it trying to solve the problem as the video is buffering each second. I watch youtube too so it is not my connection I assume
- deaux 1y agoSame happens here.
- efortis 1y agoIf you don't mind, could you help me debug this issue by testing the direct link to the video: https://uxtly.com/media/intro-PFXcRizx7hGieOVj96nDdBRNEDo.mp4 https://uxtly.com/media/intro-PFXcRizx7hGieOVj96nDdBRNEDo.mp...
- skydhash 1y agoThe video resolution is quite high 2048x1152. I would suggest getting it down to something lower like 720p. It's not a huge file, but I got an oldish laptop (8th gen intel with iGPU) and it was choking on the rendering too, even if my network connection is quite good.
- efortis 1y agoThank you!
- msephton 1y agoOP here. This is really cool! For my use cases it is missing the ability to easily expand/contract the working grid area, which is done with spreadsheets by adding/removing columns. So perhaps it is slightly too high fidelity for me? Definitely something I'll try out next time to find out!
- et1337 1y agoLove this. Personally I like Excalidraw [0] for UI mock-ups but I might use a Google Sheet next time for sharing/multiplayer purposes. [0] https://excalidraw.com/ https://excalidraw.com/
- hamasho 1y agoThe grid layout in spreadsheets works well for prototyping UI, but I also love there is no grid system in excalidraw. In other UI tool, I can't stop aligning every elements or it really bothers me. In excalidraw I can be satisfied with good-enough design. The same with other things like text size, or colors.
- abtinf 1y agoMonodraw is also good for UI design. The minimal-looking rendering of the interface gets right to the core of how the thing is supposed to work. Really it’s just the spreadsheet method taken to its logical end.
- msephton 1y agoOP here. Monodraw is cool, similarly I also really like Karo Graph and Square Sketch. But the thing those are all missing compared with a spreadsheet is the ability to quickly and easily adjust the working grid—even in the middle of your content—by adding and removing rows/columns.
- hyperbrainer 1y agoIrrelevant but spreadsheets have always struck me as one of the most beautiful pieces of software that we use. Automatically updating calculations, programming logic complex anough for most ERPs, using it is a database, easy organisation of data, graphs -- it has it all. From both a user and developer perspective, they are one of the most diverse tools on a computer. MS may make terrible software sometimes, but damn it, does Excel run the world.
- kitd 1y agoWell, they're FP, in visual form. What's not to like?!
- khalic 1y agowhat a fun way to think about them, might get me over my long life hate of spreadsheets
- lmz 1y agoExcel even has a LAMBDA function now: https://support.microsoft.com/en-us/office/lambda-function-bd212d27-1cd1-4321-a34a-ccbf254b8b67 https://support.microsoft.com/en-us/office/lambda-function-b...
- hyperbrainer 1y agoNow I wonder if I can make category theory diagrams in spreadsheets.
- YurgenJurgensen 1y agoSpreadsheets are one of the ugliest pieces of software that we use. Pretty much all of the paradigms spreadsheets enforce would be considered abhorrent in any other context. Excel needs five hundred megabytes of memory just to load a blank sheet. Vendor lock-in is just tolerated as a fact of life, as is the lack of a real way to integrate with version control, and a lack of human-readable source files. If an engineer came to you and said “So for this project, I put all the code, input data, output data and comments scattered about one big two-dimensional array with no type safety, no portability, no scalability, no security, no variable names, no code re-use, no unit tests, no integration tests, no abstractions and no error handling”, you would fire him on the spot, but that’s basically normal for an Excel sheet. There is not an ounce of elegance in MS Excel, and trying to integrate with PowerApps, PowerAutomate or PowerBI only makes things worse.
- bryanhogan 1y agoFor me a much better approach for working on wireframes, which I'd say this post is about, is Figma or Penpot.
- msephton 1y agoOP here. I love Penpot (Figma is OK but pretty lacking/stagnant in terms of core tools). And whilst they are great for wireframes you have to have a lot of self control to keep it simple, and of course there's setup required to even get going. By that time I've already finished in my spreadsheet.
- wiseowise 1y agoVery neat article. Always interesting to see how people use spreadsheets.
- bayindirh 1y agoJava called. Wants its GridBagLayout back. It says it might be patented and can probably litigate.
- msephton 1y agoOP here. SwiftUI has it too. Ideal to implement the results. But they're not great for finding the solution as they are magnitudes slower than spreadsheet manipulation.
- bayindirh 1y agoHi! Nice article, tbh. I draw my UIs on paper and just calculate the cells and merges, then code it. I'm a pen and paper addict when designing software (ideas, algorithms, UI). It's not the fastest, but the most focused mode for me.
- msephton 1y agoThat gives me an idea, maybe I can code a spreadsheet to gridcode tool. :)
- wonger_ 1y agoCould you elaborate on the part about calculating cells and merges?
- bayindirh 1y agoAs you know, grid and grid-like layouts work with cells. The height and width of these cells are integers. So, when you have something like this: +-----+-------+ | | Lorem | | |-------| | | Ipsum | | |-------| | foo | Dolor | | |-------| | | Sit | | |-------| | | Amet | +-----+-------+ You have basically six cells. Five of them (lorem, ipsum, dolor, sit, amet) are 1x1, and the other one (foo) is 1x5. What I do is, I draw the UI I imagine on a paper, add a grid where the smallest UI elements (labels, buttons, fields) their own, suitable $WIDTHx1 cells. Some cells like "foo" needs to span mutliple cells (like this 1x5) to look and place correctly. At the end, you have a "spreadsheet like view" with some cells "merged and centered" in spreadsheet software parlance. As the last step, I note the dimensions of the cells I need to realize the UI on the paper, and write the code reflecting that.
- jcarrano 1y agoA big problem with modern interfaces is that they are too dynamic, with widgets appearing and disappearing or changing size, etc. Compare that with the old DOS console or Windows 9x (and later too) where the layout was fixed and inactive widgets were grayed out. There's an increased cognitive load from having to find where the information is displayed. On mobile I often press the wrong button because the UI decided in a split second to change the number of buttons in a row and move what's below my finger. A spreadsheet-like interface shows a lot of information, but it is not overwhelming because it stays fixed, so after using the software a couple of times you can remember where things are.
- quacked 1y agoModern UI design is such a colossal nightmare of inconsistent command lists, hidden menus, changing interface behavior, duplicative functionality... My understanding is that many developers now engage in "telemetry-based design" that work to redesign interfaces around user behavior, leading to such excellent decisions as - W11: emoving directory line tracing from File Explorer and nesting all file locations under "Desktop" - Spotify: removing the iPod-style sub-locations for Artists, Albums, Playlists, etc. and instead showing them all as a continuous "library" where you filter for content based on buttons that reorder themselves and spill off the right side of the screen - Google: constantly reordering the "images", "shopping" etc buttons depending on what it thinks you're most likely to click on And it slows everything down! Every application seems to need to send telemetry back to the hosts. Spotify won't even render your "downloads" section in under 20 seconds if you're not connected to the Internet. Not only is this modern UI field hell for actually experienced users (where are the function grids? Why is everything a two-color React card now?), I believe it's dumbing down non-technical users. I sometimes send a picture of a well-ordered woodshop wall and a picture of a Tesla interior to sinternal company designers to ask them to stop turning every functional tool our internal ops people use into a point-and-click iPad program for toddlers. Give us the woodshop, not the white-seat-and-tablet view. Even that doesn't always work! I recently sent some devs an Excel mockup of a very tight, neat "task creation form" menu and they turned it into a disorganized nightmare of React fields with none of the visual justification and sorting enabled by the spreadsheet view. What is going on? Why are people allergic to functional UIs all of a sudden?
- skydhash 1y agoFrom what I've seen, it's because they're trying to reinvent everything because their ideas is that "different". It's like Microsoft full sending on VS Code and Electron, while VLC and Calibre does a better job at being cross platform. VS Code is practically 90% accidental complexity.
- dixie_land 1y agoWe have wayyyyy too many MLEs coming up with these "different" ideas, manipulate AB to show a whooping 1% improvement in (random engagement KPI), get a fat bonus check for the quarter, then rinse and repeat.
- zavec 1y agoDelightful! I will have to send this to my friends who are spreadsheet-heads (affectionate)