"Friction logging" is a form of user experience testing, where you step through a given process and provide insight into your thinking and feelings at various points throughout. The goal is to identify things people with less familiarity with your product / feature might trip on, so you can smooth out your overall experience.
The Founder of a product called Val Town put a call out for this kind of feedback:
Simon Willison pointed out that this was a pretty cool thing for a Founder to do, and I agree, and moreover I also had very important financial paperwork to procrastinate on š¤£, so I decided to dive in and write up my findings.
(Folks familiar with my time as a maintainer of the Drupal project will remember WebChickTestCase alongside every UI change, this is more or less that. I deeply apologize to Steve in advance. š
This all comes firmly from a place of love. š)
TL;DR
I am a web developer with 20+ years of experience, but limited knowledge of server-side functions / JS.
I purposely did zero reading on any of this in advance, in order to test the onboarding flow āuninfectedā by prior background knowledge.
In the end, despite several attempts, I was unable to get one of your simple examples going, due a combination of outdated docs and PEBCAK (probably).
I was also missing the āwhyā of your productāwhat use cases it solves, in what situations I should use it, etc.
Time spent: about 2 hours
Feedback Key
ā
Like this! This step was quick and easy, or it was particularly nicely done.
š¤ Things that make you go āhmmmā / things that were a bit confusing
š” Things that were a significant barrier and/or make you want to throw a table ;)
š³ļø A concrete suggestion on improving something
Home Page
https://www.val.town/
š¤ At first glance, I am intrigued, though by the end of this section it looks like a bit of word salad, because I canāt possibly understand how all of these words go together into one concept. š¤£ I imagine this will change through the course of this exercise.
ā
I like that the intro is short, and āGet startedā is right at the top. I proceed to completely ignore the rest of the page. ;) CLICK!
Sign Up Page
https://www.val.town/auth/signup
š¤ You jump straight to asking me for credentials, how about giving me a bit of context here as to what I get out of filling out this form?
(I realize this info was probably all back on the home page, which I unceremoniously skipped, but presumably youāre going to drive traffic to this page from various content/emails/etc, so the point still stands.)
š³ļø Suggestion: The page would benefit from an abbreviated āwhyā at the top, like:
āVal.town smooshes your smeeshes with great features like:
Find our more in our [LINK]about the product page[/LINK].ā
š¤ I donāt know you well enough yet to trust you with tying your service to my GitHub account, so Iām going to go the email route. If you want me to make a different choice here, maybe disclose upfront what permissions you want out of that relationship.
ā
I like that the form is short, and youāre asking for very little info up front.
Onboarding
Handle/Newsletter
https://www.val.town/onboarding/handle
š¤ No email verification? Interesting.
ā
I really like the ability to read the newsletter first before deciding to subscribe!
ā
Also like that it opens this in a new tab so that I donāt lose my place.
š³ļø (nit) Put a space between āmonth.ā and āReadā ;)
š³ļø The link goes to ALL blog posts, vs. just the newsletter ones; it might be nice to filter by tag there, but it might also be that this is āby designā so I see a fuller picture of the stuff youāre talking about.
(Detour) Newsletter Sample
https://blog.val.town/blog/val-town-newsletter-15/
ā
Like how visual this is, and also how skimmable it is. Scannable emojis are great.
ā
Like the casual humour (āfoot gunā), diagrams to help explain complex concepts.
ā
This random screenshot also showcases that you invite user feedback on your product, nice! :D
How did you hear?
https://www.val.town/onboarding/referral
ā
Good idea to ask this question.
ā
Also like that it is skippable in case Iām not feeling it.
Sample code
https://www.val.town/onboarding/val
ā
Neat that thereās a sample preview of some stuff ready-to-go.
š¤ Why am I āindigoGeckoā and not āwebchickā when I already gave you my username?
š³ļø Ah, I figured out later that this is the name of the code snippet. Maybe default it to something less silly then like HTTPResponseReact1 or something.
š¤ I'm very sorry, but I still have absolutely no idea what this is for, why I would use it, and how I would use it.
š¤ There is a "Want details on what each line of this code is doing?" link, which is nice, but that is a bit too granular for my current phase of understanding. The code is not particularly un-easy to read, Iām still missing the āwhyā and āwhat do I DO with this nice chunk of code now?ā
ā
However, I now know thereās a Discord I can go to to get extra support if I need it.
š³ļø Maybe consider making the Discord community's existence more prominent?
š³ļø I notice when I edit text above, I still need to manually click āPreviewā to show below, and thereās a small pause while I wait for things to reload. Would be neat if this happened āliveā instead. (I also would like a rainbow-farting unicorn, please ;))
š¤ Not sure what the point is of the { headers: { "Content-Type": "text/html" } }, line, because when I changed that to "text/json", nothing happened.
Anyway, ok. Clicking DONE!
Main Interface
š¤ Ok, looks like I can create different kinds of āvalsā here, and organize them into folders. What are āvalsā and what are they for?
š¤ Ah, looks like if I scroll all the way to the bottom I get some of this info:
š³ļø Suggestion: move this to the top, maybe in a collapsible section so people who already know their way around can get the compact interface.
ā
āTemplatesā is nice. I like all the copy/pasta examples so I could find something close to what I want and modify it.
š¤ Is there a way for the community to contribute to these as well?
š¤ Ok, that said, my prevailing emotion right now is āfeeling lost on what to do next,ā so Iām going off to Docs in order to see if I can find some kind of āQuickstartā example that takes me through āsoup-to-nuts.ā
Docs
https://docs.val.town/
š¤ Skimming the home page and the left sidebar, not really finding what Iām after. Letās try āGuides.ā
š³ļø Guides is WAY far down the list; maybe think about moving it up.
š¤ Hmmm. Not sure, this all seems pretty low-level and seems to assume I know more than I do.
Ok, well. One very basic web thing that all web developers need to do is save HTML form data, so letās try that.
https://docs.val.town/guides/save-html-form-data/
ā
Nice! This looks more like it.
ā
Like that both video and written content is provided.
š¤ They are not, however, equivalent. (Maybe thatās āby designā as well.) ā the video does more of an overview and the text is more pragmatic, copy/paste.
š³ļø This very video or something similar to it, ought to be on at least the docs home page, if not in the product itself. In about 30 seconds of hearing you talk, I āgotā it; it being āAdding dynamic stuff to static websitesā is at least one use case of your thing, and it's good at integrating stuff to/from other places. š (I would greatly welcome insight on others!)
š¤ Interestingly, when I try to do exactly whatās outlined in the video, it looks like I can no longer submit feedback on the docs, there is instead an āEdit this pageā and it takes me to GitHub where it prompts me to fork the repo to suggest changes.
I can understand this being more useful to you as a maintainer, because it encourages people to solve their own problems (and probably also cuts down on a bunch of e-mail spam ;)), but just pointing out that at this point in the journey I would just bail here without giving you any feedback because that just seems like way too much work for as a drive-by docs bug spotter. ;)
Anyway, letās continue down the tutorial.
(Attempting to) Add an HTTP val
ā
I like that I can just copy/paste this with a handy button.
š¤ It also says I can āfork the one belowā but I donāt see how I to do that. Maybe this is only an option I get if I auth with GitHub, but then it would be nice if either this text didnāt show up at all, or it mentioned that was a requirement.
š¤ Now that Iāve copied it, to whence do I paste it? Iām guessing this is back on the other āmainā page where I got confused and went to docs. It would be nice if something here said that. (But maybe this is just knowledge other people innately have and unnecessary.)
Anyway, I go back there:
š¤ Hereās an interesting thing. You told me in the docs that I needed an HTTP val, but HTTP val is not one of the options in this list. (Maybe you mean HTTP handler?) Nothing under āTemplatesā says āHTTP valā either.
Ok, so since nothing matches, letās try āNew valā
š¤ Hmmm. Ok this is a TOTAL blank slate.
š³ļø Itād be nice if there was some skeleton code or even some commented out stuff thatās like āYou need at least a Request and Response object hereā orā¦ anything.
Anyway, letās paste in the code from before and click āRunā and see what happens.
š¤ Hm. On the surface, nothing at all happened. Down below, thereās no āAwaiting connectionā¦ā message or āError: You done screwed up, sonā or any output whatsoever, beyond a counter that keeps counting up and a green light. Assuming this is a good thing and expected?
Back to the tutorial, copy/pasting the form to just a local form.html file:
ā
The video made a big deal about the importance of the form action attribute. I see that you call it out here as well, both in the text above and in a comment above the code.
š” However, the instructions here donāt seem to work. There is no menu called āEndpoints,ā there is a Copy under the āthree dotsā menu, but āweb endpointā is not one of the things I can copy.
ā
That said, I like the preview of each copy option here, because that at least narrows it down that I probably donāt want āVal IDā but rather one of the link/URL ones.
š” Now to iterate through to find the value thatās closest to the āhttps://user-saveFormData.web.val.runā in the sample code:
š” Well, *&^@#. ;) NONE of those are anything like the one in the example. Iāll just go with āLinkā then since it looks similar to what I usually put in form action attributes.
Letās try it and see if it works (I donāt think it will, as thereās a third section of the docs that I havenāt looked at yet). Hereās a checkpoint:
š” There was a āNot foundā error upon submission, but it disappeared so fast I couldnāt read it, nor screenshot it. It just took me back to the main page with no message explaining what just happened.
(Attempting to) Tie everything together
All right, letās see if that last bit of the tutorial ties this up for us.
š¤ Hm. I donāt love this method compared to having the HTML form cleanly separated, but ok.
š¤ Presumably I copy / paste this on TOP of my existing val code (given the green + signs as a ādiffā) but itād be nice if the docs made this more explicit.
Anyway, letās try that and hit Run again and see what happens now:
š¤ Oh, interesting. There are now TWO processes executing.
š” I have clicked on every possible thing known to existence on the older one, and cannot for the life of me figure out a way to stop it.
š¤ Welp. Letās copy the link into a new browser window and see what happens:
https://www.val.town/v/webchick/tomatoPossum
Nope. ;) Thatās just the same pastebin kind of thing. I guess this is the Gist-like āsharingā bit of the product.
š¤ Ok, letās try copying the module URL:
https://esm.town/v/webchick/tomatoPossum
{"statusCode":404,"error":"Not Found","message":"Sorry, that Val could not be found."}
OK, thatās at least something I can debug! :D
š¤ Is it because I never āSavedā the val?
ā
No, Save is grayed out; apparently it autosaves (thatās nice).
š¤ Is there anything in logs?
https://www.val.town/v/webchick/tomatoPossum/evaluations
š¤ Ok, says there are 19 log entries, that could potentially be useful? But when I click it...
š” Hmmm. But where do I see the log entries? "Logs" is blank, despite saying there were 19 of these on the screen before.
š¤ Ah, if I click a teeny tiny checkbox called āSystemā I can see stuff in the Logs, but this appears to just be pulling in dependencies, so not helpful here.
š¤ Ok, trying one last thing, which is to go back to my locally hosted form.html and change the form action to the module URL instead of the link url.
š” LOL nope. Welp, I officially give up.
Conclusion/Recommendations
Itās very possible that this product is NOT for people without extensive server-side function / JS experience, in which case fair enough; this feedback may not be valuable to you.
However, consider that by adding a few sign-posts along the way, and making a concerted effort to drive new āwhatās this then?ā users towards a seamlessly working example at the beginning of their journey, you could see a huge uptick in usage from people who know web development things really well, and could start to see the power of using your thing as well. š
Here are some specific recommendations:
Add more of the āwhyā on your product, from both within the product and especially during the onboarding flowāwhat use cases does it allow me to solve, what day-to-day headaches can it remove for me, and why is it better to do this with you than alternative vendors, etc?
In the product interface, think through how to guide a new user, as quickly as possible, toward seeing the āah-haā value of your product. It looks like you have some good tutorials, but theyāre a bit buried and not integrated into the product itself.
Perform a docs audit: Take a swing through your docs and make sure they reflect changes youāve made to the UI since writing them. (e.g. which āCopyā do I use?)
Hope that helps! š
Also, dear reader, if you are at all interested in me doing one of these for your developer-oriented product, hit me up at friction -at- webchick -dot- net.
