Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to tame a user interface using a spreadsheet

blog.gingerbeardman.com

Post reply on HN
Print view View original

51–60 of 72 posts

Re: How to tame a user interface using a spreadsheet

#51

Post by wonger_ »

bayindirh wrote: post #42
msephton wrote: post #41

Earlier quoted context omitted.

OP 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.

Hi! 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.

Could you elaborate on the part about calculating cells and merges?

Re: How to tame a user interface using a spreadsheet

#52

Post by efortis »

msephton wrote: post #40
efortis wrote: post #20

~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

OP 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!

Thank you for checking it out. In the past it had an auto-layout and app mode, but I removed all the graphic and layout design features in favor of "Copy for AI".

Your "Driving Game" mockup got me thinking about indicating proportions on the drafts. I don't have a good answer to that, except that Cards can be resized in width. At any rate, to answer "perhaps it is slightly too high fidelity", I would say it's the opposite, too low since there's no layout design involved.

I'm aware it‘s confusing because Cards look like a mobile layout. I tried doing the pencil sketch style but it also gave the impression of a layout design tool.

Re: How to tame a user interface using a spreadsheet

#53

Post by efortis »

ynrfin wrote: post #28
efortis wrote: post #20

~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

Hi, 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

If 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.mp...

Re: How to tame a user interface using a spreadsheet

#54

Post by bayindirh »

wonger_ wrote: post #51
bayindirh wrote: post #42

Earlier quoted context omitted.

Hi! 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.

Could you elaborate on the part about calculating cells and merges?

As 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.

Re: How to tame a user interface using a spreadsheet

#55

Post by skydhash »

quacked wrote: post #49

Modern 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 "De…

From 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.

Re: How to tame a user interface using a spreadsheet

#56

Post by skydhash »

efortis wrote: post #53
ynrfin wrote: post #28

Earlier quoted context omitted.

Hi, 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

If 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.mp...

The 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.

Re: How to tame a user interface using a spreadsheet

#57

Post by efortis »

skydhash wrote: post #56
efortis wrote: post #53

Earlier quoted context omitted.

If 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.mp...

The 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.

Thank you!

Re: How to tame a user interface using a spreadsheet

#58

Post by pipes »

quacked wrote: post #49

Modern 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 "De…

The windows 11 dir tree thing is a nightmare especially with one drive added in. Trying to find a file I've downloaded has become strangely difficult. Also word and excel seem hell bent on making it hard to save or find a file in a location you already know

Re: How to tame a user interface using a spreadsheet

#59

Post by dixie_land »

skydhash wrote: post #55
quacked wrote: post #49

Modern 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 "De…

From 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.

We 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.

Re: How to tame a user interface using a spreadsheet

#60

Post by quacked »

pipes wrote: post #58
quacked wrote: post #49

Modern 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 "De…

The windows 11 dir tree thing is a nightmare especially with one drive added in. Trying to find a file I've downloaded has become strangely difficult. Also word and excel seem hell bent on making it hard to save or find a file in a location you already know

I've just recently downloaded Explorer++ and am not looking back. It doesn't fix the directory tree, but it at least allows it to be navigated and displayed with more proficiency.
Post reply on HN