Redesigning an app, one day a week at a time | Hacker News Reader

Redesigning an app, one day a week at a time

pketh.org

76 pointspketh25 comments

I do like the idea of using colors to indicate function, but I would be concerned that they draw attention to themselves. Sometimes that is a good thing, but sometimes it's really distracting from the content. I think Reddit's redesign if a good example of this going wrong. It's like a they hired Jackson Pollock to do the design, with colored buttons and doodads everywhere. It's something I think about a lot with my crappy-ass web design efforts.

As an accessibility thing, I have fairly large hands, and really struggle with the sort of tiny buttons shown in this GUI. I semi-frequently have to use websites in desktop mode so I can zoom in to actually press buttons. Not a great experience, and also not something app designers seem to consider.

> Sometimes feeling fast, is more important than actually being fast. This is especially the case when publishing a new post or comment.

> When publishing content on FL, you had to wait until the server successfully responded before you were allowed to do something else. Whether consciously or not, these sorts of penalties for interaction naturally discourage future interactions.

I think when submitting things is one of the times actually taking a moment can feel satisfactory. Returning immediately can feel flimsy and unreliable, like "did it really happen?" and then you refresh and don't see your content.

> I do like the idea of using colors to indicate function, but I would be concerned that they draw attention to themselves > with colored buttons and doodads everywhere

I agree, functional colors are not a solution that work for everyone, and also requires a lot of diligence and restraint to not turn into a birthday cake mess (something harder for large corps like reddit)

> really struggle with the sort of tiny buttons shown in this GUI

It's hard to develop a UI that works for touch and doesn't look clumsy when you've got a mouse. The solution we use here is to visually size the buttons for desktop, but have an invisible padding around them be clickable

> Returning immediately can feel flimsy and unreliable, like "did it really happen?"

The way we address this is to show your comment appended to the comments list, or to show your post added to your journal. In this case we're optimizing for the joy that comes from the immediate feedback of I pushed submit and now my content is real.

There's def room for more fun florishes in some apps like confetti etc when you do something, but those are a better fit for games or for rarer interactions imo (ideally leaving comments is a common action that some will do multiple times a day)

Using colors to convey state/semantics is also a big accessibility no-no, fyi.

If it's only way you convey it.

Using colors to further emphasize state or semantics is pretty great. Traffic lights is a good model of how that can work.

Yup and in this case everything still has icons and labels. The color here is more akin to optional progressive enhancement

But the icons are for individual actions rather than the semantic grouping the colors convey, no?

Yes and those actions can be understood independently of their grouping

> If it's only way you convey it.

Exactly. That's why your traffic lights example is puzzling to me? They're a notorious example of a case of something that can very easily be (and often is) ambiguous.

How is a traffic light ambiguous? The stop and go lights are physically distinct lamps. The top light means stop, the bottom light means go.

It's not obvious that the position is meaningful or what meaning it has. That's why if you look at the history of traffic lights you'll see many variations, including pictograms to complement the colors (e.g. character walking / standing still, "STOP" "GO" text, etc. etc.).

You can see that stop means to stop by looking at what happens when the light turns read.

It's not obvious that "STOP" means to stop either, or a "walking" character means to walk if you don't speak the language or are unfamiliar with cartoons. When you learned the language, you connected the meaning to the word, because you heard it in connection to someone stopping, so now the word stop is a metaphor for that time someone stopped.

This is exactly the same way you assign meaning to any sign, including a stoplight. That's just how semiotics works, all language is metaphorical, no sign can carry meaning without a context.

That's 100% true in the abstract sense that meaning is conventional/contextual, but that doesn't mean all conventions are equally intuitive.

The rule "Top means stop, bottom means go" is specific to traffic light context. The meaning of the word "Stop" is much broader as it is used in more contexts. (Of course, some people can't read, which creates a bunch of other problems).

Maybe a better way to illustrate my point: I think traffic light are better at highlighting the problem of how to properly do semantic redundancy than at actually solving that problem (and that this is in part because colors are not accessible).

FYI, I'm not some kind of accessibility zealot, I think it's just an interesting design problem.

Accessibility should rely on an alternative adapted representation, not justify a lowest common denominator approach where everybody loses.

Of course, the point wasn't that the colors should be removed entirely, only that they're only a partial solution.

Interesting to see. A lot of this looks like pretty novel interface (not something you can easily copy from other apps). How did you find inspiration for some of these designs/direction?

Thanks meagher, I actually have another blog post all about inspiration https://pketh.org/decade-of-inspiration.html

but tldr, I find a couple key things from outside software to revolve around for every product (like old computers, music synthesizers, etc.)

Cool article, have you done any other apps?

Ps OP your site is lacking https

Thanks :)

So besides https://kinopio.club (which I work on now), I was the co-creator of glitch.com (it's changed a lot now though, this post captures my work on it https://pketh.org/the-first-four-years-of-glitch.html)

The blog does have https, but I accidentally added the non https url to HN. Not sure if I can change it though

Oh man I love Kinopio, it's not exactly what I wanted out of it, but it's a very delightful interface

> it's not exactly what I wanted out of it

would love to hear more about that so I can improve it for you

In all seriousness, don't, what I wanted was more like a Hypercard / process flow mapping tool with "choose your own adventure" diverging paths .. I ended up using Twine and it was ... fine, a bit complicated, Hypercard was awesome ...

But I ended up using Kinopio for converting standing meeting threads into fun little mindmaps.

Nice to see.

In https://flathabits.com I also arrived to a similar presentation of today vs not today (for me, today vs all habits).

For a habits app, I was ruthlessly simplifying things to remove friction and distractions from the tracking process. Either of these can easily throw you off, resulting in a bigger problem (giving up on your habits).

That totally makes sense.

I think there's a place for both the one click 'i did the thing today' like flathabits, and a higher friction but more expressive 'here's what I thought about the thing I did today'

Just downloaded this, I love the concept. Does it have any support for iCloud sync between devices? I installed it on my iPhone and Mac, doesn't look like it's syncing. I saw this line in the description that made me think it might:

> Share/sync file with your Mac or other iPhone apps

... but it's in the context of plain text file export, so maybe not.

It's suported (experimental). Try importing an empty .org text file from an iCloud location and select "in place".

Reply on news.ycombinator.com