![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
roadrunnertwice) wrote in ![[site community profile]](https://www.dreamwidth.org/img/comm_staff.png){kind=small}
dw_dev2019-07-24 11:07 pm
Testers needed: Quick-reply, site-skin entry pages, icon browser
Hello!! I'm looking for volunteers to help test a whole bunch of major changes.
I've got three piles of stuff in the queue:
- More design updates for the quick-reply
- Refreshed site-skin entry pages (and reply, and icons)
- New icon browser on journal pages
Interested? Please read on!
Test Plan
Thank you for helping me with this!! I know this is a little long -- feel free to skip parts if you're not feeling it. This isn't your job, and any info you can give me is helpful.
Step Zero: Setup
All this stuff is running on my "Dreamhack" dev instance, not on dreamwidth.org. To test it, you'll need to make an account on my instance.
- Browse to http://www.rr-thrice.hack.dreamwidth.net/create.
Paste in one of the following invite codes, and create an account.
Invite code: G2XSKNW3FGTWJAAAAAALInvite code: RTPJBKJAATYNBAAAAAAM- Invite code: 5GNA9R3SWM656AAAAAAN
- Invite code: RJDSZBFADHS8KAAAAAAP
- Invite code: CJY8TFKMDDEPQAAAAAAQ
- Invite code: AQGBTBMRE6XRNAAAAAAR
Invite code: 7GEQE3R5JQ8W7AAAAAAS- Invite code: CR8DKTZBMJDG9AAAAAAT
- Invite code: ACTX7QT38SPPDAAAAAAU
- Invite code: 9VN2NVSTC26VSAAAAAAV
- Invite code: ZXXD5H8RCJNV9AAAAAAW
Comment below to say which invite code you took. I'll try and keep the list updated, and will post more if they run out!
- Upload some icons. (I've configured things so that free users get 25 icons and can use the icon browser.) I suggest:
- Several 100x100 squares.
- At least one 100xLESS (landscape) rectangle.
- At least one LESSx100 (portrait) rectangle.
- At least one LESSxLESS (smaller than full size) rectangle or square.
- At least one icon with multiple "keywords," separated by commas.
- Change your journal style to something other than the default. (Something about my default style is broken and it's not relevant to what we're working on, so just avoid it.)
- Make at least one test post in your own journal.
- Open a file somewhere to take notes in! I'll have questions for you throughout; please jot down your answers so you can post them here when you're done.
- The first thing to write down: your OS and web browser.
Step One: Quick-Reply
The basics. Reply to a post from your own journal's "recent entries" page.
- Use the "Browse" button, and select an icon from the icon browser.
- Use the drop-down menu to select an icon.
- Use the random icon feature to select a random icon, then use it again.
- Use the "Quote" button to quote some text.
- Repeat all of the above on your phone. (Except the icon browser, we already know it's busted. More on that later.)
Questions:
- Could you do everything you expected to?
- Could you read the "Browse" button just fine? If not, what is your default icon?
- Was anything confusing? Annoying? Delightful? Glitchy-looking?
- Were there any extra problems on mobile?
Note: The layout test isn't live on that server anymore, and we decided which layout we're probably going with.
Layout shuffle. Reply to anything.There's three links at the top of the quick-reply form: "Name above," "Name beside", and "Name below." These are temporary controls for testing alternate designs.Click each link, and stare at all three alternate layouts for a while.Do the same thing on your phone. (All three layouts are slightly different on mobile.)
Questions:Which layout do you prefer on desktop?Which layout do you prefer on mobile?Any extra thoughts about the position of the username indicator and "More options" button?
Known issues:On older browsers, some of these alt layouts are a little busted, because it didn't make sense to work out every kink on something we might abandon. So please use a recent browser when deciding which layout you prefer, and we'll get it working on older browsers later.
Note: This change is already live on the main site.
Deep threads.Reply to a comment deep in a thread, one that's been squashed down real small.Do the same thing on your phone.
Questions:Did you have enough room to compose your reply?Was anything confusing? Annoying? Delightful? Glitchy-looking?Were there any extra problems on mobile?
iPhone Bounce. If your smartphone happens to be an iPhone:
- Reply to anything.
- Paste or type a bunch of text in the message body, so that the textarea is forced to scroll.
- Scroll the textarea up and down to view different parts of the message.
Questions:
- Does anything break?
- Does anything look SUPER wonky?
- Is this an improvement over previous times you've written a big comment on mobile?
Known issues:
- The blue cursor kind of "ghost-hovers" until scrolling ends, and it's just a known Webkit bug that we can't do anything about. Try and ignore it.
Step Two: Refreshed Site Skin Pages
This feature and the next one are hidden behind a beta flag. You gotta opt into the beta before trying either of them.
- Go to the beta features page and enable "Updated journal page components."
Questions:
For all of the tasks below, I want to know the same thing: Is anything noticeably wrong, rather than just different? The font sizes and colors and spacings have changed, but all of the controls and information should be in the same places.
- Entry pages. Go to the
?style=siteversion of an entry page with a lot of comments, like this one.- Peruse the page.
- Try replying to a comment with the quick-reply.
- Side-by-side. Leave that entry page open. In another browser window, open a comparable
?style=siteentry page on the real version of dreamwidth.org. Compare the two side-by-side. Reply pages. Open a reply link on that entry page in a new tab, so it goes to the slow-reply form. Contemplate the slow-reply.
Known issues:This one still has its default styles, I didn't do any specific cleanup on it yet. Curious which parts people will actually care about.Have now redesigned it.
- Icon pages. Browse to a user's icons page, like this one. Contemplate the icons page.
Mobile view. Try all three of those pages on your phone.
Questions:
- If your smartphone happens to run Android, I'm especially curious about the quick-reply form!
- Are comments and entries (and icons) legible?
- Can you find your way around the page just fine?
- Can you reply to comments just fine?
- Alternate site skins. Go to the display settings and choose one of the alternate site skins. Repeat any or all of the tasks above.
- Light style. Go to the
?style=lightversion of an entry page. Check whether it looks OK.
Step Three: New Icon Browser
This feature is behind the same beta flag as the previous feature. Make sure you've enabled the beta before trying it.
Journal styles. Reply to anything on a journal-styled page and activate the icon browser.
- Select an icon. The drop-down menu and icon preview should show your new choice.
- Bring up the browser again and mess with the settings (meta text / none, large / small). Try all four combinations.
- Select an icon without using the "select" button at the top of the browser dialog.
- Select a specific keyword for an icon that has multiple keywords available (if you created any icons with multiple keywords).
- Start selecting an icon, but close the browser before confirming your choice.
- Repeat all of the above on your phone.
Questions:
- Were you able to do everything you expected to?
- Was anything confusing? Annoying? Delightful? Glitchy-looking?
- Site skin. Try the icon browser on a site skin entry page.
no subject
no subject
no subject
You can log in with OpenID instead, using your normal Dreamwidth account as your identity. It won't let you post journal entries, but you can comment on the other posts I linked.
The quick-reply only gets shown to logged-in users, so commenting anon won't work, but OpenID should do the trick.
no subject
Quick Reply Test results
Browser: Firefox, Mobile Safari
Step 1:
Question: Could you do everything you expected to do?
Answer: Quoting text seems very glitchy! It didn't work at all from Quick Reply on Recent Entries (though it's fine when replying to individual entries).
Question: Could you read the "Browse" button just fine? If not, what is your default icon?
Answer: Everything worked as expected.
Question: Was anything confusing? Annoying? Delightful? Glitchy-looking?
Answer: The "random icon" interface was a bit cumbersome. Having an extra button is useful on mobile, but totally a waste of space on desktop. Randomizing doesn't always behave intuitively (you can randomly select the same icon you already have).
Question: Were there any extra problems on mobile?
The "More Options" button is a bit too small to easily click on mobile. The dropdown also truncates long icon names (especially when it's displayed inline, in any layout except "Name beside").
Step 2:
"Name beside" looks the best! It's the only option that works on mobile, due to the dropdown option issue.
Step 3:
Plenty of room to compose my reply! The only glitch I caught was that the "Post Comment" button gets disabled (on both desktop and mobile) when exiting out of preview mode.
Re: Quick Reply Test results
Weird, I can't reproduce this! Was that on both platforms, or just on Linux?
THAT's messed up! Do you mean like hitting the back button after viewing the preview page?
Re: Quick Reply Test results
no subject
no subject
no subject
no subject
no subject
Tablet: Android 8.1.0 & Firefox 68.0
Phone: Android 7.1.1 & Firefox 68.0
1.1:
No problems on any device.
1.2:
"Name above" looks best to me on phone. "Name beside" looks better on both wider devices.
Pausing to deal with chores stuff…
no subject
Laptop: fine. Tablet, phone: I'm not seeing the rightwards motion on laptop. Though also tablet and phone are always portrait unless I'm watching a video on fullscreen, and laptop is landscape. I had plenty of room on all the devices, though I'm surprised the tablet gave me a half-screen-width reply box like the laptop, instead of a full-screen-width reply box like the phone.
2.1
Fine on all devices.
2.2
Better on phone than dreamwidth.org is, actually, the font is large enough to be legible—weirdly, on laptop the font is a touch too large, and on tablet they're the same size…
2.3
I'm not sure what I'm supposed to be contemplating? On all three devices it's stripey, blocky, and ugly as hell.
2.4
I'm not sure what I'm supposed to be contemplating? They all look fine to me?
2.5
Didn't I just—
"Name beside" is best looking of the three from phone now, but it got less attractive on tablet. Not unattractive enough I prefer "Name above" or "Name below", though.
2.6
Laptop: Oh, so that's why I never switched to Lynx on dreamwidth.org.
Tablet: —Wait is site style by device? Is that a thing on dreamwidth.org? Also why is it scrolling me horizontally when the entirety of the comment I'm replying to plus the entirety of the quick-reply box fits on my screen without horizontally scrolling first? I know it does because it did that after loading the quick-reply.
Phone: The account settings page doesn't try to shrink or reflow the text in order to fit everything on my screen. Tropospherical Red has teeny font here, Lynx just makes me scroll horizontally. Shouldn't clicking from a ?style=site entry to one of its collapsed comments keep it on ?style=site instead of loading the page in the journal style?
3.1
It all works on all three devices, assuming the desired behavior on "select a different icon, but close the icon browser before confirming" is to stick with the previous icon. However:
Laptop: Meta text with small images looks like it'll be impossible to look through with more than a few icons, though, since it's putting the keywords beside the icons instead of below, and therefore nothing is lining up in columns. Not that I'm sure it would columns the other ways, mind, five icons isn't apparently enough to see that.
Tablet: Large images does not attempt to column, meta text or no. Small images without meta text, dunno since all five icons fit on one row; small images with meta text, they're in a single column.
Phone: Small images without meta text doesn't attempt to column. With, again single column. Large images column fine both ways. I'm not sure if this is true on journal style and I just didn't quite see it or if I only thought I saw anything, but in Lynx style, it definitely horizontal scrolled to stick the left edge of the icon browser to the left edge of the screen. And then, of course, to go back into the icon browser, I have to scroll the other way!
no subject
That thing with the icon browser attaching to the left edge of the *page* instead of the left edge of the *viewport* (so you have to scroll left to find it) is an especially good catch. Gross.
Small icons with metatext sounds like it's working as designed (with the existing design I inherited from the beta new entry page), but I'm not wholly sure that design is the right one. The problem is that if you try to lay it out like large+meta (with text below the icon), it wastes even *more* space. It might just be an unreasonable combination of things to ask for, idk.
The account settings page is impossible on mobile, yeah. I didn't get into the backstory here because the post was way too long already, but there's actually two discrete versions of every site skin, with totally separate implementations. This batch of changes switches entry/reply/icon pages to the new-style skins, but doesn't touch account settings, which of course uses the old bad ones, sigh.
no subject
no subject
Or, I guess before we go there -- is it something you considered disruptive, or just a normal day browsing with android firefox?
no subject
I mean I expect the browser to scroll me vertically if that's what it takes to make sure the typy box and the keyboard are both visible at the same time. Not horizontally.
no subject
I wonder what's causing that! It looks like it's probably not blowing the layout out any further, but it's taking advantage of any pre-existing rightward overflow to scroll until the QR hits the left edge?
I wonder if it's related to this new scroll anchoring feature. The bit in the summary about "suppression triggers" definitely piques my interest, since "changes to the computed value of [...]
right[or] any width or height-related properties" are exactly what I'm doing in there to make the QR expand leftwards.Ugh, I'm going to need to borrow a device or something; I don't think I can sort this out by just playing telephone with someone. Thank you for finding this. There's a chance that particular behavior will go live before I can figure out a fix, because the smushed comment fields are probably slightly worse than weird scroll jumping on one platform, but I definitely want to kill this.
no subject