workspace.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>UX Research: Browser Window Saving - Emil Holmsten</title>
		<link
			rel="icon"
			type="image/svg+xml"
			href="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20fill%3D%27none%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20fill%3D%27%232149b5%27%20d%3D%27M13%205H7v2H5v2H3v6h2v2h2v2h2v2h2v2h2v2h2v2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2h2V9h-2V7h-2V5h-6v2h-2v2h-2V7h-2z%27%2F%3E%3C%2Fsvg%3E"
		/>
		<script>
			const theme = localStorage.getItem("theme") || "light";
			document.documentElement.setAttribute("data-theme", theme);
			if (localStorage.getItem("fontScale") === "large") {
				document.documentElement.setAttribute(
					"data-font-scale",
					"large",
				);
				document.documentElement.style.setProperty(
					"--font-scale",
					"1.15",
				);
			}
		</script>
		<link
			rel="stylesheet"
			href="styles.css"
		/>
	</head>

	<body>
		<nav>
			<a
				href="index.html"
				aria-label="Go to home page"
			>
				<svg
					class="eh-logo"
					xmlns="http://www.w3.org/2000/svg"
					width="35"
					height="27"
					fill="none"
					viewBox="0 0 35 27"
				>
					<path
						class="logo-bg"
						fill="#f9f7f1"
						d="M0 0h35v27H0z"
					/>
					<path
						fill="currentColor"
						d="M2 2h15v1H2zm0 18h15v1H2zM2 4h15v1H2zm0 18h15v1H2zm0-10h11v1H2zm0-6h15v1H2zm0 18h15v1H2zm0-10h11v1H2zm0-4h5v1H2zm0-2h5v1H2zm0 8h5v1H2zm0 2h5v1H2zM24 2h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zm0 6h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zm0 2h3v1h-3zM18 2h1v23h-1zm10 0h1v23h-1zm-8 0h1v23h-1zm10 0h1v23h-1zm-8 0h1v23h-1zm10 0h1v23h-1zm-8 10h1v3h-1zm2 0h1v3h-1zM10 8h1v3h-1zM8 8h1v3H8zm4 8h1v3h-1zm0-8h1v3h-1zm-2 8h1v3h-1zm-2 0h1v3H8zm6-8h1v11h-1zm2 0h1v11h-1z"
					/>
					<path
						fill="currentColor"
						fill-rule="evenodd"
						d="M0 27V0h35v27zm34-1H1V1h33z"
						clip-rule="evenodd"
					/>
				</svg>
			</a>
		</nav>
		<div class="toolbar">
			<button
				class="font-size-toggle"
				aria-label="Toggle large font size"
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="32"
					height="32"
					fill="none"
					viewBox="0 0 32 32"
					class="font-size-toggle plus"
				>
					<path
						fill="currentColor"
						d="M13 7h5v16h-2v2h6v-2h-2V7h5v2h2V5H11v4h2zm-5 6H5v2H3v-4h12v4h-2v-2h-3v10h2v2H6v-2h2zm19-2h-2v3h-3v2h3v3h2v-3h3v-2h-3z"
					/>
				</svg>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="32"
					height="32"
					fill="none"
					viewBox="0 0 32 32"
					class="font-size-toggle minus"
				>
					<path
						fill="currentColor"
						d="M20 7h5v2h2V5H11v4h2V7h5v16h-2v2h6v-2h-2zm-10 6h3v2h2v-4H3v4h2v-2h3v10H6v2h6v-2h-2zm20 1h-8v2h8z"
					/>
				</svg>
			</button>
			<button
				class="theme-toggle"
				aria-label="Toggle dark mode"
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="32"
					height="32"
					fill="none"
					viewBox="0 0 32 32"
					class="theme-toggle sun"
				>
					<path
						fill="currentColor"
						d="M9 13h2v6H9zm4-2V9h6v2zm0 12v-2h6v2zm8-10h2v6h-2zM2 15h4v2H2zm24 0h4v2h-4zM17 2v4h-2V2zm0 24v4h-2v-4zM7 7h2v2H7zm4 4h2v2h-2zm8 0h2v2h-2zm0 8h2v2h-2zm-8 0h2v2h-2zM5 5h2v2H5zm20 20h2v2h-2zm-2-2h2v2h-2zm2-16v2h-2V7zm2-2v2h-2V5zM7 25v2H5v-2zm2-2v2H7v-2z"
					/>
				</svg>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="32"
					height="32"
					fill="none"
					viewBox="0 0 32 32"
					class="theme-toggle moon"
				>
					<path
						fill="currentColor"
						d="M24 10h2v10h-2zm-2-2h2v2h-2zm0 12h2v2h-2zm-8-4h2v2h-2zm-6 6h2v2H8zm12 0h2v2h-2zm0-16h2v2h-2zm-4 2h2v8h-2zm-6 16h10v2H10zm-2-4h6v-2H6v4h2zm8-14h4V4h-6v4h2z"
					/>
				</svg>
			</button>
		</div>
		<main class="flow">
			<div class="image-frame hero">
				<img
					src="images/workspace/front-page.png"
					alt="Three workspace mockups, Microsoft Edge, Vivaldi and a research prototype"
					loading="eager"
					width="1280"
					height="720"
				/>
			</div>

			<h1
				id="workspace-title"
				class="project-title"
				style="view-transition-name: workspace"
			>
				Saving Browser Windows
			</h1>
			<p>
				This masters thesis investigates how browsers can better support
				multi-session web tasks, meaning tasks that span multiple
				browsing sessions over time, by analysing existing window-saving
				solutions, identifying user needs through task analysis and
				interviews, and designing and evaluating prototype interfaces in
				direct comparison with existing workspace implementations in
				Microsoft Edge and Vivaldi to assess usability improvements.
			</p>

			<p>
				<a
					href="thesis.pdf"
					download
					aria-label="Download full thesis PDF"
				>
					<span class="link-text">Download full thesis (PDF)</span>
				</a>
			</p>

			<h2>Background</h2>
			<p>
				Most modern browsers have until recently (at the time of the
				study) lacked a native window-saving feature, leading many users
				to rely on session persistence, extensions, or manual
				workarounds to save their tabs.
			</p>

			<h2>Research foundation</h2>
			<p>
				The design direction was informed by a competitive audit of
				existing browser workspace implementations, task analysis of
				save and restore workflows, and interviews focused on how users
				manage multi-session browsing tasks.
			</p>

			<div class="image-frame">
				<img
					src="images/workspace/task-analysis-example.png"
					alt="An example task analysis diagram mapping the steps involved in opening a saved browser window in prototype A"
					loading="lazy"
					width="1728"
					height="1587"
				/>
			</div>
			<small class="image-description">
				Task analysis diagram mapping the steps involved in opening a
				saved browser window in one of the reseach prototypes. Red boxes
				indicate mental tasks, yellow boxes indicate physical tasks, and
				grey boxes indicate automatic system responses.
			</small>

			<h2>Usability evaluation</h2>
			<p>
				The concept was evaluated through a comparative usability study
				against existing browser workspace implementations. Results
				showed statistically significant improvements for several tasks
				in ease of use, task efficiency, and user confidence when saving
				and restoring windows compared to comparison baselines Microsoft
				Edge and Vivaldi.
			</p>
			<div class="image-frame">
				<img
					src="images/workspace/mockups.png"
					alt="Three workspace mockups, Microsoft Edge, Vivaldi and a research prototype"
					loading="eager"
					width="1280"
					height="720"
				/>
			</div>
			<small class="image-description">
				Three mockups tested in the final evaluation. The first is based
				on Microsoft Edge, the second on Vivaldi, and the third was
				developed during the project.
			</small>

			<div class="image-frame">
				<img
					src="images/workspace/sus-scores.png"
					alt="New documents view showing categorized folders and uploaded files"
					loading="lazy"
					width="1728"
					height="1587"
				/>
			</div>
			<small class="image-description">
				<strong>
					Average Likert Ratings (Excluding Task 5 and SUS):
				</strong>
				<br />
				Likert scale ratings revealed significant differences between
				the research prototypes and both Microsoft Edge and Vivaldi.
			</small>

			<h2>Recent Developments</h2>
			<p>
				Microsoft Edge now exposes “Save tabs to a workspace” directly
				in its “New” dropdown, giving window saving equal prominence to
				workspace creation.
			</p>
			<p>
				This change reflects the study's primary recommendation: to
				prioritise saving windows as workspaces instead of prioritising
				creating new workspaces.
			</p>

			<p>
				<a href="index.html">
					<span
						class="back-link-arrow"
						aria-hidden="true"
						><-</span
					><span class="link-text">Back home</span>
				</a>
			</p>
		</main>
		<script src="theme.js"></script>
	</body>
</html>