Destack was a bit too simplified for what I was trying to do, I wanted an element properties panel on the right, asset browser and a bunch of other random things. I'll say this though, it was damned easy to install and host. If I ever rekindle that idea again, I'll probably start here add on to it rather than just starting from scratch.

Here's what I made

I wouldn't have figured it all out without catching this YouTube tutorial on it last night, it's a bit out of date but it got me started.

I try not to use a lot of design or technical buzzwords at work, lay people tend to find them confusing. There is however, one I say most often, because it comes up constantly: cognitive load. I'm no psychologist, so I'm sure I lack nuance in my understanding but, "cognitive load" is your working memory, what you can sensibly keep in your head at a given time. The expression of it that I find most people are familiar with is Miller's Law, which is the notion that the average person can hold 7 items (plus or minus 2) in their head at a time.

I find myself bringing it up constantly simply because so much of user experience design is a push and pull, this careful balancing act of managing the needs of the user and the needs of the client. An example, you have a well designed thing that has say, 5 features in it and now there's a need to add 5 more things to add. It's the commonly accepted reason why phone numbers are 7 digits long divided in a chunk of 3 digits and one of 4 although it feels like it might be apocryphal. It's the reason why your designer won't let you have 15 items along your primary navigation.

Accessibility Concerns

I've been trying to put accessibility higher in my list of concerns, I'm sure it's no doubt largely driven by WebAIM's abysmal 2023 Accessibility Report and how we should all be ashamed.

Neurodivergent users or those with memory issues may have different limitations around Miller's Law. It's only in the last few years that I've discovered that I'm neurodivergent myself, so this really resonated with me and is a reminder that I need to re-evaluate my understanding of a lot of things in that context

Sighted users and those with sight deficits have differing experiences of your design. If you have an e-commerce site with a grid of products with 4 per row, well then the sighted user can probably scan it 4 products at a time. However, if you're using a screenreader it's an entirely text-based experience. The post has an excellent example to which I can only say "yikes, I hope that's at least at 2x speed"

Imagine you are a visually impaired person, though, and your way of navigating a website is through a screenreader that must dictate the following for each item on a list of 400:

“Looking at 1 of 400 items”>”Product 1"> “photo of model with blue t-shirt on”>
“on sale”>”Basic Tshirt”>”Navy Blue”>”$15.99">”view product details”>
“add to favorites”>”add to cart”>”next product”>”Product 2">….etc.

Physical design versus the intangibility of digital

Display table design in physical stores is something I know next to nothing about, but it's something I probably should have a better handle on even if I don't design tangible products. Category Pages, Featured Products, Sales Products these are all things that would sit on a carefully designed display in a store. It doesn't explicitly come up in the post but I found myself thinking more about physical/digital analogies and the importance of the place your user is in and how user location can have an affect on personas.

Page behaviour affects and is also affected by the mode of the user

The combination of lazy loading plus an endless scroll puts the user in a trance state. Of course it does, we've all lost hours to the social feeds before. The problem here is that this is counter-productive in a context where you're trying to sell something. The user begins to lose their place, individual products start to blend together and the user just doesn't remember what they're doing.

When each product is presented in the same format, nothing is memorable, and there is slight nuance only to style, color, and price. As such, users often scan the page for what looks different. They are looking for a clear emotional response to help them make decisions.

I also had a bit of an epiphany reading this. When I'm shopping online, I hate it when I can't easily open a product page in a new tab. I didn't exactly understand why I did that but this post identifies exactly why:

If they click on it, they aren’t sure they will be able to return to their place in line if they return to the listing page afterward.

YES! Exactly. I cannot trust that the category page I'm on is well designed enough that I won't lose all my carefully chosen filters and sorting and scroll position. And the longer the page get, the worse that problem gets.

I research things in much the same way, go to a page and while reading it middle-click everything that looks halfway useful. So I'll start with one page, and somehow by the third article I have 26 new tabs open. At some point, I might stop, take stock of anything what is open and decide if it's non-relevant, relevant, or interesting. Non-relevant tabs get closed. Interesting tabs are send to my bookmark db. Relevant tabs stay open. But even this can start to fall apart, if I hit an awesome list or something, that strategy of mine can really get out of hand and I just need to save everything and start over again. I have a great extension for that, OneTab. I mostly got it to save tabs lost in a browser crash, but it's great to dump all your tabs on to a page for easier scanning.

When users are feeling overwhelmed, they can make rash decisions or making a purchase they will not be happy with or leaving. It happened to me while I started writing this post. I was foolish and started just writing it. Then because I'd just woken up and my ADHD meds hadn't kicked in or I wasn't entirely sure what I wanted to say or what, I started to get overwhelmed. "Look at all those unfinished drafts already, just give up, post the URL on LinkedIn without commentary and be done with it," I thought to myself. I forced myself to make a bullet list of everything that I was thinking stream of consciousness style so my brain could have a nice little kernel panic for a bit. If you're reading this, then yay me, I got over that moment of overwhelm.

You need more chunks and smaller chunks

At the start of this post I mentioned the perennial UX design struggle of trying to wedge more things into a place where they won't fit. The fix for this is almost always reorganizing. Taking that list of existing features (buttons, menu items, what have you), the list of new features and then finding a sensible, logical and understandable way to group them and hopefully in an incremental fashion that doesn't require the user to relearn that whole thing.

One thing I did find myself disagreeing with is the point about pagination at the end, generally, I don't like pagination. To me, there's little difference between an endless scroll and a pagination control that shows you're on page 1 of 500, either way it shows you probably need better chunking or perhaps better ways to pare down a set of items with filtering and searching. In the context of browsing an e-commerce site, which is the focus of the article, it does makes sense to me. I'm just uncertain if that rule holds true in all contexts, I should do more research there to better understand my assumptions and see if they're even valid.

• Things I'm researching right now.

• Things that might be interesting in the future.

• Things that would have been helpful in the past.

• Things I want to read, listen to, watch, play.

• and every open-source software package that looks halfway interesting.

The problem is I so rarely go back to check on all those links. Which isn't so bad when it's some article I forgot about, one lazy Sunday and I'm all caught up. When it comes to the software packages, it's another story. It takes so much work and time with my current process and I rarely make much progress:

1. Get the environment set up right.

2. Figure out how to get the Hello, World! example going.

3. Try something a little more challenging or robust.

4. Get flustered when it doesn't go right.

5. Leave it for a week and then forget about it.

6. Remember it, return to it, and be completely lost.

7. GOTO 1.

When Link Love Turns into Link Overload

So my list of software packages to learn just gets larger and larger. Lately, at least 10 times this week, I've landed on a GitHub page and thought to myself: "Hey this looks cool, I should star this" and it's already starred. It's a real problem, this pile only seems to get larger. I need some help moving forward.

I've been thinking on and off about building a personal assistant application to help me manage this for a few years, mostly thinking it was an unfeasible goal. But seeing the capabilities of ChatGPT (and other LLMs like it), in these last few months. I'm starting to think it might be time for me to try to make something.

ChatGPT's Code Conjuring

Here's a prompt I gave ChatGPT 4 (FYI: you get 5 messages every 3 hours for free from Forefront.ai):

You're an AI master at writing javascript code, you are given a new library name, a short description and a set of urls describing it. Please read the information online describing how the tool should be used and then provide a non-trivial real world to-do list example of it.

Library: animejs URLs: https://github.com/juliangarnier/anime https://animejs.com/documentation

It spit out a bunch of code that I then copy-pasted into a Codepen, it had just one error to fix. It was missing a closing "}" at the end of the script that's it. I fixed it and it WORKED! Only 10 minutes from finding out about this free GPT4 option from Forefront to having a working demo on Codepen. Look at that slick animation when you add a task!

Blew. My. Mind. 🤯 You can find the full chat transcript here if you want to try it for yourself.

Taking the Next Steps in Link Management and Learning

Time to figure out where to go from here. I have some ideas, a lot of them actually, I'll just regurgitate them stream of consciousness style here:

• Write a better post about this long-term assistant plan (...and my Axure script from earlier this week). I'm excited to talk about the full idea this experiment is connected with in detail. If only to clarify it for my benefit and have a proper plan of action.

• Learn about planning prompts. A thing I see quite often in tutorials and articles about prompts is a block of text that seem to describe the character and purpose of the AI for that session. I hope that I can better understand their structure and preferred content so that I can have a library of prompts prepared to generate for various tasks. Is there a directory of ChatGPT prompts somewhere? (EDIT: Yes, I found one in March. Guess where it was? IN THE LINK DATABASE 😳)

• Make more things.

  • How do I go about setting this random idea up as a system?

  • What pieces do I need to assemble so that I can have scripts monitoring my link database in Notion (and my starred GitHub repos) for new links, and then have it generate examples to learn with?

  • a To-Do list was a bad example, every demo is a to-do list. What other prototypical app examples should I consider?

  • What if I get a whole library of prototypical apps and a large corpus of previously learned packages? Can I make the AI idly "wonder" and "imagine" how existing things it has learned might be mashed together into new things? I want to wake up to an email from my assistant telling me it built a UI generating example data by mashing up faker-js and mocker-data-generator with nocodb, but then it also did another version styled like arwes and rendered it in aframe so you can do it in VR - just because it could

• Error checking and automated fixing of the code. I was utterly surprised that it worked so well on the first try. This isn't my first time getting ChatGPT to write code (I should share my experiments with Unity C# generation sometime), so I know it sometimes needs massaging to get right or fix little syntax errors.

• Learn about text summarization. Beyond code generation, I expect this assistant system to also give me summaries of articles and non-codey things that show up in my links database. This I haven't been too worried about, I have a tutorial I found today that should help me make progress.

• What about long-term storage? I've read some things about that, but I'm far from understanding it. Is this what a vector database is for?

• Figure out if this still works on a local machine. I've been meaning to look at GPT4All, it runs locally with about 16GB of RAM and no GPU requirement. I'd settle for slower output or lower quality (so long as I can fix it after) if it meant I wasn't beholden to a third party to make it happen. I found another tutorial to learn that too.