The Browser is Integral to Web App UX

The browser is an integral part of any webapp experience.

If you're making a webapp, carefully consider how your app will behave when you invoke various browser functions.

1. Open a bookmark, click a link in email or slack:
   1. Do I see the same content that was visible when I copied the link?
   2. Can I open a link from another user?
   3. Can I get links to popups and expanding content?
   4. Can I read a link and know what it points to? Ex: /invoices/123.
   5. Are links short or long? When I email a link, will it get cut into multiple lines?
   6. Can I tell a link to someone verbally? Are there mixed-case letters or obscure symbols?
2. Back & Forward:
   1. Will this navigate between breadcrumb items (screens)?
   2. Will it show/hide popups or open/close expanding content?
   3. Will it undo/redo changes to things on the page?
3. Refresh:
   1. Do breadcrumbs stay?
   2. Does it keep unsaved changes?
4. I make some changes and then close the tab, refresh, or click a link:
   1. Does it keep my changes for later?
   2. Does it warn me and let me stay on the page?
5. I save changes, but it fails:
   1. Does it tell me that it didn't save?
   2. Does the message stay on the screen, hard to miss?
   3. Can I try saving again?
6. I open the app in two browser windows:
   1. Can I navigate in both windows separately?
   2. Does each window have its own breadcrumbs?
   3. What if I change the same content in two windows?
   4. What if two people change the same content?
   5. If I make a change but saving fails, then someone changes and saves, then I save, whose changes are saved?
7. I middle-click a link:
   1. Does a new tab open?
   2. Can I middle-click a bunch of links and let them load in the background?
8. I click a PDF or other file that my browser can show:
   1. Does it show in the browser, or do I have to save it my computer before looking at it?
   2. Does it open in a new tab?
   3. Can I middle-click to open it in a new tab?
   4. If I send the link to someone, can they view it?
9. When we deploy a new version of the app:
   1. Can I continue working normally?
   2. Does it lose my unsaved changes?
   3. Does it close everything and show the homepage?
10. When content is taller than the browser window:
    1. Does a scrollbar appear?
    2. Is the scrollbar handle clearly visible?
    3. Can I drag the handle?
    4. Can I use the mouse scroll wheel? Does it scroll like other apps on my computer?
    5. Can I drag my finger to scroll it?
11. When content is wider than the browser window:
    1. Does the content flow or resize, so I can use vertical scrolling to see it?
    2. Does the content extend offscreen and require horizontal scrolling? If so, is there a visual indicator, an affordnace?
    3. Is the scrollbar handle clearly visible?
    4. Can I drag the handle?
    5. Can I drag my finger to scroll it?
12. Accessibility, inclusive design:
    1. Can I pinch to zoom the page?
    2. When I zoom, does all content resize accordingly?
    3. Does the app use my browser's font size setting?
    4. Are modals scrollable, buttons reachable on zoomed screens?