af/pages/research.vue

<template><NuxtLayout name="default">
    <template #headline>{{ headline }}</template>
    <template #tagline>{{ tagline }}</template>

    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
        <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
            <section class="sm:col-span-2">
                <p>I am a trained computer scientist and I have done qualitative research. This means I'm comfortable with analysing numbers and words alike.</p>
            </section>
            <section class="left col-start-1 col-span-1">
                <figure>
                    <picture>
                        <source srcset="/images/reactable-2x.webp" type="image/webp" />
                        <source srcset="/images/reactable.jpg 1x, /images/reactable-2x.jpg 2x" />
                        <img class="rounded" srcset="/images/reactable.jpg" alt="Reactable" />
                    </picture>
                    <figcaption><span>An interactive musical tabletop.</span></figcaption>
                </figure>
                <p>When I started my doctoral studies, there was an alarming lack of empirical studies in the area of <strong>interactive tabletops</strong> as <strong>music learning tools</strong>. It is not clear what happens when you give people a giant touch screen, and teach them music with it. This means you have to sit down and watch them, record their actions, and analyse their conversations.</p>
            </section>
            <section class="right sm:col-start-2">
                <h2>Qualitative research</h2>
                <p>Qualitative research is hard and fascinating work: it gives you insight on what people do and think &ndash; like reading minds, if you think about it.</p>
                <p>QR is at the heart of <strong>user experience research</strong>, among other applications &ndash; that means figuring out what people think about the things you make, and how they use them.</p>
                <p>You can look at pretty much anything for information. Typical data sources include interviews, journals, videos, and so on. However, it is a common misconception that qualitative findings are less rigorous than quantitative findings: they are simply different, and they can even work together to strengthen each other and produce even more rigorous research.</p>
            </section>
            <section class="full sm:col-span-2 pt-6 border-t-2">
                <h2>What can I help you with?</h2>
                <p>Do you have a pressing question that needs answer? Do you want to make your app better and easier to use? Do you have a brilliant new idea and want to know if it's worth developing it?</p>
                <p>Things I <strong>can</strong> help you with include</p>
                <ul>
                    <li><strong>User research</strong> (ethnographies, surveys, focus groups, A/B testing…)</li>
                    <li><strong>Interaction design</strong> (UX, prototyping, behaviour, patterns, iterative design…)</li>
                    <li><strong>Usability</strong> (web sites, graphical and tangible interfaces…)</li>
                </ul>
                <p>I can work with your designers and developers to help you look into ideas and products, prototype and evaluate them, and finally build and release amazing solutions.</p>
            </section>
            <section class="full col-start-1 sm:col-span-2">
                <p class="calltoaction">Curious? <a href="/contact">Get in touch!</a></p>
            </section>
        </article>
    </div>
</NuxtLayout></template>

<script lang="ts" setup>
definePageMeta({
    layout: false
});

const headline = "Research";
const tagline = 'Not the same as "google"';

const title = `${headline} ••• Andrea Franceschini, PhD`;
const keywords = "research, science, qualitative, quantitative, experiments, music, learning, tabletop, research, the open university, university of cambridge, isaac physics, reactable";
const description = "Science!";

useState('top-banner-image', () => '/images/banner_research-2x.webp');
useState('pageClasses', () => ['research', 'page']);
useHead({
    title,
    meta: [
        { property: 'keywords', content: keywords },
        { property: 'DC.Title', content: title },
        { property: 'twitter:title', content: title },
        { property: 'og:title', content: title },
        { property: 'description', content: description },
        { property: 'DC.Description', content: description },
        { property: 'twitter:description', content: description },
        { property: 'og:description', content: description },
    ]
});
</script>