Phrasing Bimanual Interaction for Visual Design

Architects and other visual thinkers create external representations of their ideas to support early-stage design. They compose visual imagery with sketching to form abstract diagrams as representations. When working with digital media, they apply various visual operations to transform representations, often engaging in complex sequences. This research investigates how to build interactive capabilities to support designers in putting together, that is phrasing, sequences of operations using both hands. In particular, we examine how phrasing interactions with pen and multi-touch input can support modal switching among different visual operations that in many commercial design tools require using menus and tool palettes—techniques originally designed for the mouse, not pen and touch. We develop an interactive bimanual pen+touch diagramming environment and study its use in landscape architecture design studio education. We observe interesting forms of interaction that emerge, and how our bimanual interaction techniques support visual design processes. Based on the needs of architects, we develop LayerFish, a new bimanual technique for layering overlapping content. We conduct a controlled experiment to evaluate its efficacy. We explore the use of wearables to identify which user, and distinguish what hand, is touching to support phrasing together direct-touch interactions on large displays. From design and development of the environment and both field and controlled studies, we derive a set methods, based upon human bimanual specialization theory, for phrasing modal operations through bimanual interactions without menus or tool palettes

Assisted Interaction for Improving Web Accessibility: An Approach Driven and Tested by Userswith Disabilities

148 p.Un porcentaje cada vez mayor de la población mundial depende de la Web para trabajar, socializar, opara informarse entre otras muchas actividades. Los beneficios de la Web son todavía más cruciales paralas personas con discapacidades ya que les permite realizar un sinfín de tareas que en el mundo físico lesestán restringidas debido distintas barreras de accesibilidad. A pesar de sus ventajas, la mayoría depáginas web suelen ignoran las necesidades especiales de las personas con discapacidad, e incluyen undiseño único para todos los usuarios. Existen diversos métodos para combatir este problema, como porejemplo los sistemas de ¿transcoding¿, que transforman automáticamente páginas web inaccesibles enaccesibles. Para mejorar la accesibilidad web a grupos específicos de personas, estos métodos requiereninformación sobre las técnicas de adaptación más adecuadas que deben aplicarse.En esta tesis se han realizado una serie de estudios sobre la idoneidad de diversas técnicas de adaptaciónpara mejorar la navegación web para dos grupos diferentes de personas con discapacidad: personas conmovilidad reducida en miembros superiores y personas con baja visión. Basado en revisionesbibliográficas y estudios observacionales, se han desarrollado diferentes adaptaciones de interfaces web ytécnicas alternativas de interacción, que posteriormente han sido evaluadas a lo largo de varios estudioscon usuarios con necesidades especiales. Mediante análisis cualitativos y cuantitativos del rendimiento yla satisfacción de los participantes, se han evaluado diversas adaptaciones de interfaz y métodosalternativos de interacción. Los resultados han demostrado que las técnicas probadas mejoran el acceso ala Web y que los beneficios varían según la tecnología asistiva usada para acceder al ordenador

Faster cascading menu selections with enlarged activation areas

Cascading menus are used in almost all graphical user interfaces. Most current cascade widgets implement an explicit delay between the cursor entering/leaving a parent cascade menu item and posting/unposting the associated menu. The delay allows users to make small steering errors while dragging across items, and it allows optimal diagonal paths from parent to cascade items. However, the delay slows the pace of interaction for users who wait for the delay to expire, and it demands jerky discrete movements for experts who wish to pre-empt the delay by clicking. This paper describes Enlarged activation area MenUs (EMUs), which have two features: first, they increase the area of the parent menu associated with each cascade; second, they eliminate the posting and unposting delay. An evaluation shows that EMUs allow cascade items to be selected up to 29% faster than traditional menus, without harming top-level item selection times. They also have a positive smoothing effect on menu selections, allowing continuous sweeping selections in contrast to discrete movements that are punctuated with clicks

Kosketusnäytöllisten mobiililaitteiden syöksy Internetiin: Käytettävyyssuosituksia Yhden Webin saavuttamiseksi

Tämä työ tarjoaa päivitettyä tietoa mobiilin Web-selailun käyttökokemuksesta, mikä on tarpeen, sillä mobiilin Webin tila on muuttunut huomattavasti viime vuosina. Mobiilien sivunlatausten määrä lähti voimakkaaseen kasvuun uuden sukupolven puhelinten kuten iPhonen myötä. Näissä laitteissa yhdistyvät täysimittainen selain sekä useissa tapauksissa kosketusnäyttökäyttöliittymä. Vuorovaikutus Webin kanssa kosketusnäytöllisillä mobiililaitteilla eroaa suuresti tietokoneselailusta. Suuren näytön, hiiren ja näppäimistön sijaan sivuja katsellaan taskukokoiselta näytöltä, ja sivuja vieritetään ja zoomataan sormi- tai piirrineleillä. Monissa laitteissa ei ole fyysisiä kirjoitusnäppäimiä, vaan täysi QWERTY-näppäimistö ponnahtaa ruudulle tarvittaessa. Käyttökokemusta tutkittiin asiantuntija-arvion ja käytettävyystestin avulla. Useita verkkosivuja arvioitiin erilaisilla mobiililaitteilla 3 asiantuntijan voimin, ja testissä 18 mobiilin Webin käyttäjää käytti Webiä 6 mobiili- ja pöytälaitteella. Tutkimuksessa löydettiin selkeitä verkkosivutekijöitä, jotka huonontavat mobiili-Webin käyttökokemusta jopa edistyneimmillä laitteilla. Tyypilliset Webin käytettävyysongelmat korostuivat, ja pienet näytöt sekä kosketuskäyttöliittymät osoittivat uusia haasteita. Tuloksena muodostettiin 60 käytettävyyssuositusta, joita hyödyntämällä mobiilikäyttäjien käyttökokemusta Webissä voidaan parantaa. Suositukset käsittelevät verkkosivun ulkoasua ja navigointia, raskasta sisältöä ja epäyhteensopivuuksia, syötettä vaativia sisältöjä sekä tekijöitä, jotka liittyvät laitetunnistukseen ja erillisiin mobiilikäyttöliittymiin. Mutta toisin kuin aikaisemmat tutkimukset osoittavat, tie parannukseen ei ole kovin pitkä, sillä mobiiliselailu koettiin kokonaisuudessaan melko miellyttävänä.This thesis provides a needed update for mobile web browsing user experience research, as the state of the mobile Web has changed substantially in the last few years. The emergence of new-generation phones, such as the iPhone, started an unparalleled rise in the number of mobile page views of websites. These devices combine full-featured browsers and, in many cases, touch screen interfaces. As for interaction with the Web, mobile touch screen devices differ from desktop devices to a large extent. Instead of a big screen, mouse, and keyboard, a pocket-size screen displays the pages, which are zoomed and scrolled with finger or stylus gestures. No physical buttons are provided for writing in many devices, but a virtual full QWERTY keyboard pops up on the screen when needed. A study consisting of an expert evaluation of several websites with different mobile devices by 3 specialists, and a usability test with 18 mobile Web users using 6 mobile and desktop devices was carried out. The study found that there are clear website design factors that deteriorate the mobile Web UX even when a high-end device is used. Classic website usability issues were emphasized, and new issues were presented by small screens and touch interfaces. As a result, 60 UX guidelines were defined. Utilizing these allows for providing a better UX for the mobile users of full websites. The guidelines consist of recommendations concerning website layout and navigation, heavy content and incompatibilities, content demanding input, and factors related to device detection and separate mobile interfaces. However, in contrast to the _ndings of previous related studies, the road of enhancement is not that long, as the overall pleasantness of mobile browsing was considered rather high

Human Factors Design Standard for Acquisition of Commercial-off-the-Shelf Subsystems, Non-Developmental Items, and Developmental Systems

The Human Factors Design Standard (HFDS) provides reference information to assist in the selection, analysis, design, development, and evaluation of new and modified Federal Aviation Administration (FAA) systems and equipment. This document is based largely on the 1996 Human Factors Design Guide (HFDG) produced by the FAA in 1996. It converts the original guidelines document to a standard and incorporates updated information, including the newly revised chapters on automation and human-computer interface. The updated document includes extensive reorganization of material based on user feedback on how the document has been used in the past. Additional information has been also been added to help the users better understand tradeoffs involved with specific design criteria. This standard covers a broad range of human factors topics that pertain to automation, maintenance, displays and printers, controls and visual indicators, alarms, alerts and voice output, input devices, workplace design, system security, safety, the environment, and anthropometry documentation. This document also includes extensive human-computer interface information

Blending the Material and Digital World for Hybrid Interfaces

The development of digital technologies in the 21st century is progressing continuously and new device classes such as tablets, smartphones or smartwatches are finding their way into our everyday lives. However, this development also poses problems, as these prevailing touch and gestural interfaces often lack tangibility, take little account of haptic qualities and therefore require full attention from their users. Compared to traditional tools and analog interfaces, the human skills to experience and manipulate material in its natural environment and context remain unexploited. To combine the best of both, a key question is how it is possible to blend the material world and digital world to design and realize novel hybrid interfaces in a meaningful way. Research on Tangible User Interfaces (TUIs) investigates the coupling between physical objects and virtual data. In contrast, hybrid interfaces, which specifically aim to digitally enrich analog artifacts of everyday work, have not yet been sufficiently researched and systematically discussed. Therefore, this doctoral thesis rethinks how user interfaces can provide useful digital functionality while maintaining their physical properties and familiar patterns of use in the real world. However, the development of such hybrid interfaces raises overarching research questions about the design: Which kind of physical interfaces are worth exploring? What type of digital enhancement will improve existing interfaces? How can hybrid interfaces retain their physical properties while enabling new digital functions? What are suitable methods to explore different design? And how to support technology-enthusiast users in prototyping? For a systematic investigation, the thesis builds on a design-oriented, exploratory and iterative development process using digital fabrication methods and novel materials. As a main contribution, four specific research projects are presented that apply and discuss different visual and interactive augmentation principles along real-world applications. The applications range from digitally-enhanced paper, interactive cords over visual watch strap extensions to novel prototyping tools for smart garments. While almost all of them integrate visual feedback and haptic input, none of them are built on rigid, rectangular pixel screens or use standard input modalities, as they all aim to reveal new design approaches. The dissertation shows how valuable it can be to rethink familiar, analog applications while thoughtfully extending them digitally. Finally, this thesis’ extensive work of engineering versatile research platforms is accompanied by overarching conceptual work, user evaluations and technical experiments, as well as literature reviews.Die Durchdringung digitaler Technologien im 21. Jahrhundert schreitet stetig voran und neue Geräteklassen wie Tablets, Smartphones oder Smartwatches erobern unseren Alltag. Diese Entwicklung birgt aber auch Probleme, denn die vorherrschenden berührungsempfindlichen Oberflächen berücksichtigen kaum haptische Qualitäten und erfordern daher die volle Aufmerksamkeit ihrer Nutzer:innen. Im Vergleich zu traditionellen Werkzeugen und analogen Schnittstellen bleiben die menschlichen Fähigkeiten ungenutzt, die Umwelt mit allen Sinnen zu begreifen und wahrzunehmen. Um das Beste aus beiden Welten zu vereinen, stellt sich daher die Frage, wie neuartige hybride Schnittstellen sinnvoll gestaltet und realisiert werden können, um die materielle und die digitale Welt zu verschmelzen. In der Forschung zu Tangible User Interfaces (TUIs) wird die Verbindung zwischen physischen Objekten und virtuellen Daten untersucht. Noch nicht ausreichend erforscht wurden hingegen hybride Schnittstellen, die speziell darauf abzielen, physische Gegenstände des Alltags digital zu erweitern und anhand geeigneter Designparameter und Entwurfsräume systematisch zu untersuchen. In dieser Dissertation wird daher untersucht, wie Materialität und Digitalität nahtlos ineinander übergehen können. Es soll erforscht werden, wie künftige Benutzungsschnittstellen nützliche digitale Funktionen bereitstellen können, ohne ihre physischen Eigenschaften und vertrauten Nutzungsmuster in der realen Welt zu verlieren. Die Entwicklung solcher hybriden Ansätze wirft jedoch übergreifende Forschungsfragen zum Design auf: Welche Arten von physischen Schnittstellen sind es wert, betrachtet zu werden? Welche Art von digitaler Erweiterung verbessert das Bestehende? Wie können hybride Konzepte ihre physischen Eigenschaften beibehalten und gleichzeitig neue digitale Funktionen ermöglichen? Was sind geeignete Methoden, um verschiedene Designs zu erforschen? Wie kann man Technologiebegeisterte bei der Erstellung von Prototypen unterstützen? Für eine systematische Untersuchung stützt sich die Arbeit auf einen designorientierten, explorativen und iterativen Entwicklungsprozess unter Verwendung digitaler Fabrikationsmethoden und neuartiger Materialien. Im Hauptteil werden vier Forschungsprojekte vorgestellt, die verschiedene visuelle und interaktive Prinzipien entlang realer Anwendungen diskutieren. Die Szenarien reichen von digital angereichertem Papier, interaktiven Kordeln über visuelle Erweiterungen von Uhrarmbändern bis hin zu neuartigen Prototyping-Tools für intelligente Kleidungsstücke. Um neue Designansätze aufzuzeigen, integrieren nahezu alle visuelles Feedback und haptische Eingaben, um Alternativen zu Standard-Eingabemodalitäten auf starren Pixelbildschirmen zu schaffen. Die Dissertation hat gezeigt, wie wertvoll es sein kann, bekannte, analoge Anwendungen zu überdenken und sie dabei gleichzeitig mit Bedacht digital zu erweitern. Dabei umfasst die vorliegende Arbeit sowohl realisierte technische Forschungsplattformen als auch übergreifende konzeptionelle Arbeiten, Nutzerstudien und technische Experimente sowie die Analyse existierender Forschungsarbeiten

From Molecules to the Masses : Visual Exploration, Analysis, and Communication of Human Physiology

Det overordnede målet med denne avhandlingen er tverrfaglig anvendelse av medisinske illustrasjons- og visualiseringsteknikker for å utforske, analysere og formidle aspekter ved fysiologi til publikum med ulik faglig nivå og bakgrunn. Fysiologi beskriver de biologiske prosessene som skjer i levende vesener over tid. Vitenskapen om fysiologi er kompleks, men samtidig kritisk for vår forståelse av hvordan levende organismer fungerer. Fysiologi dekker en stor bredde romlig-temporale skalaer og fordrer behovet for å kombinere og bygge bro mellom basalfagene (biologi, fysikk og kjemi) og medisin. De senere årene har det vært en eksplosjon av nye, avanserte eksperimentelle metoder for å detektere og karakterisere fysiologiske data. Volumet og kompleksiteten til fysiologiske data krever effektive strategier for visualisering for å komplementere dagens standard analyser. Hvilke tilnærminger som benyttes i visualiseringen må nøye balanseres og tilpasses formålet med bruken av dataene, enten dette er for å utforske dataene, analysere disse eller kommunisere og presentere dem. Arbeidet i denne avhandlingen bidrar med ny kunnskap innen teori, empiri, anvendelse og reproduserbarhet av visualiseringsmetoder innen fysiologi. Først i avhandlingen er en rapport som oppsummerer og utforsker dagens kunnskap om muligheter og utfordringer for visualisering innen fysiologi. Motivasjonen for arbeidet er behovet forskere innen visualiseringsfeltet, og forskere i ulike anvendelsesområder, har for en sammensatt oversikt over flerskala visualiseringsoppgaver og teknikker. Ved å bruke søk over et stort spekter av metodiske tilnærminger, er dette den første rapporten i sitt slag som kartlegger visualiseringsmulighetene innen fysiologi. I rapporten er faglitteraturen oppsummert slik at det skal være enkelt å gjøre oppslag innen ulike tema i rom-og-tid-skalaen, samtidig som litteraturen er delt inn i de tre høynivå visualiseringsoppgavene data utforsking, analyse og kommunikasjon. Dette danner et enkelt grunnlag for å navigere i litteraturen i feltet og slik danner rapporten et godt grunnlag for diskusjon og forskningsmuligheter innen feltet visualisering og fysiologi. Basert på arbeidet med rapporten var det særlig to områder som det er ønskelig for oss å fortsette å utforske: (1) utforskende analyse av mangefasetterte fysiologidata for ekspertbrukere, og (2) kommunikasjon av data til både eksperter og ikke-eksperter. Arbeidet vårt av mangefasetterte fysiologidata er oppsummert i to studier i avhandlingen. Hver studie omhandler prosesser som foregår på forskjellige romlig-temporale skalaer og inneholder konkrete eksempler på anvendelse av metodene vurdert av eksperter i feltet. I den første av de to studiene undersøkes konsentrasjonen av molekylære substanser (metabolitter) ut fra data innsamlet med magnetisk resonansspektroskopi (MRS), en avansert biokjemisk teknikk som brukes til å identifisere metabolske forbindelser i levende vev. Selv om MRS kan ha svært høy sensitivitet og spesifisitet i medisinske anvendelser, er analyseresultatene fra denne modaliteten abstrakte og vanskelige å forstå også for medisinskfaglige eksperter i feltet. Vår designstudie som undersøkte oppgavene og kravene til ekspertutforskende analyse av disse dataene førte til utviklingen av SpectraMosaic. Dette er en ny applikasjon som gjør det mulig for domeneeksperter å analysere konsentrasjonen av metabolitter normalisert for en hel kohort, eller etter prøveregion, individ, opptaksdato, eller status på hjernens aktivitetsnivå ved undersøkelsestidspunktet. I den andre studien foreslås en metode for å utføre utforskende analyser av flerdimensjonale fysiologiske data i motsatt ende av den romlig-temporale skalaen, nemlig på populasjonsnivå. En effektiv arbeidsflyt for utforskende dataanalyse må kritisk identifisere interessante mønstre og relasjoner, noe som blir stadig vanskeligere når dimensjonaliteten til dataene øker. Selv om dette delvis kan løses med eksisterende reduksjonsteknikker er det alltid en fare for at subtile mønstre kan gå tapt i reduksjonsprosessen. Isteden presenterer vi i studien DimLift, en iterativ dimensjonsreduksjonsteknikk som muliggjør brukeridentifikasjon av interessante mønstre og relasjoner som kan ligge subtilt i et datasett gjennom dimensjonale bunter. Nøkkelen til denne metoden er brukerens evne til å styre dimensjonalitetsreduksjonen slik at den følger brukerens egne undersøkelseslinjer. For videre å undersøke kommunikasjon til eksperter og ikke-eksperter, studeres i neste arbeid utformingen av visualiseringer for kommunikasjon til publikum med ulike nivåer av ekspertnivå. Det er naturlig å forvente at eksperter innen et emne kan ha ulike preferanser og kriterier for å vurdere en visuell kommunikasjon i forhold til et ikke-ekspertpublikum. Dette påvirker hvor effektivt et bilde kan benyttes til å formidle en gitt scenario. Med utgangspunkt i ulike teknikker innen biomedisinsk illustrasjon og visualisering, gjennomførte vi derfor en utforskende studie av kriteriene som publikum bruker når de evaluerer en biomedisinsk prosessvisualisering målrettet for kommunikasjon. Fra denne studien identifiserte vi muligheter for ytterligere konvergens av biomedisinsk illustrasjon og visualiseringsteknikker for mer målrettet visuell kommunikasjonsdesign. Særlig beskrives i større dybde utviklingen av semantisk konsistente retningslinjer for farging av molekylære scener. Hensikten med slike retningslinjer er å heve den vitenskapelige kompetansen til ikke-ekspertpublikum innen molekyler visualisering, som vil være spesielt relevant for kommunikasjon til befolkningen i forbindelse med folkehelseopplysning. All kode og empiriske funn utviklet i arbeidet med denne avhandlingen er åpen kildekode og tilgjengelig for gjenbruk av det vitenskapelige miljøet og offentligheten. Metodene og funnene presentert i denne avhandlingen danner et grunnlag for tverrfaglig biomedisinsk illustrasjon og visualiseringsforskning, og åpner flere muligheter for fortsatt arbeid med visualisering av fysiologiske prosesser.The overarching theme of this thesis is the cross-disciplinary application of medical illustration and visualization techniques to address challenges in exploring, analyzing, and communicating aspects of physiology to audiences with differing expertise. Describing the myriad biological processes occurring in living beings over time, the science of physiology is complex and critical to our understanding of how life works. It spans many spatio-temporal scales to combine and bridge the basic sciences (biology, physics, and chemistry) to medicine. Recent years have seen an explosion of new and finer-grained experimental and acquisition methods to characterize these data. The volume and complexity of these data necessitate effective visualizations to complement standard analysis practice. Visualization approaches must carefully consider and be adaptable to the user's main task, be it exploratory, analytical, or communication-oriented. This thesis contributes to the areas of theory, empirical findings, methods, applications, and research replicability in visualizing physiology. Our contributions open with a state-of-the-art report exploring the challenges and opportunities in visualization for physiology. This report is motivated by the need for visualization researchers, as well as researchers in various application domains, to have a centralized, multiscale overview of visualization tasks and techniques. Using a mixed-methods search approach, this is the first report of its kind to broadly survey the space of visualization for physiology. Our approach to organizing the literature in this report enables the lookup of topics of interest according to spatio-temporal scale. It further subdivides works according to any combination of three high-level visualization tasks: exploration, analysis, and communication. This provides an easily-navigable foundation for discussion and future research opportunities for audience- and task-appropriate visualization for physiology. From this report, we identify two key areas for continued research that begin narrowly and subsequently broaden in scope: (1) exploratory analysis of multifaceted physiology data for expert users, and (2) communication for experts and non-experts alike. Our investigation of multifaceted physiology data takes place over two studies. Each targets processes occurring at different spatio-temporal scales and includes a case study with experts to assess the applicability of our proposed method. At the molecular scale, we examine data from magnetic resonance spectroscopy (MRS), an advanced biochemical technique used to identify small molecules (metabolites) in living tissue that are indicative of metabolic pathway activity. Although highly sensitive and specific, the output of this modality is abstract and difficult to interpret. Our design study investigating the tasks and requirements for expert exploratory analysis of these data led to SpectraMosaic, a novel application enabling domain researchers to analyze any permutation of metabolites in ratio form for an entire cohort, or by sample region, individual, acquisition date, or brain activity status at the time of acquisition. A second approach considers the exploratory analysis of multidimensional physiological data at the opposite end of the spatio-temporal scale: population. An effective exploratory data analysis workflow critically must identify interesting patterns and relationships, which becomes increasingly difficult as data dimensionality increases. Although this can be partially addressed with existing dimensionality reduction techniques, the nature of these techniques means that subtle patterns may be lost in the process. In this approach, we describe DimLift, an iterative dimensionality reduction technique enabling user identification of interesting patterns and relationships that may lie subtly within a dataset through dimensional bundles. Key to this method is the user's ability to steer the dimensionality reduction technique to follow their own lines of inquiry. Our third question considers the crafting of visualizations for communication to audiences with different levels of expertise. It is natural to expect that experts in a topic may have different preferences and criteria to evaluate a visual communication relative to a non-expert audience. This impacts the success of an image in communicating a given scenario. Drawing from diverse techniques in biomedical illustration and visualization, we conducted an exploratory study of the criteria that audiences use when evaluating a biomedical process visualization targeted for communication. From this study, we identify opportunities for further convergence of biomedical illustration and visualization techniques for more targeted visual communication design. One opportunity that we discuss in greater depth is the development of semantically-consistent guidelines for the coloring of molecular scenes. The intent of such guidelines is to elevate the scientific literacy of non-expert audiences in the context of molecular visualization, which is particularly relevant to public health communication. All application code and empirical findings are open-sourced and available for reuse by the scientific community and public. The methods and findings presented in this thesis contribute to a foundation of cross-disciplinary biomedical illustration and visualization research, opening several opportunities for continued work in visualization for physiology.Doktorgradsavhandlin

Human-Computer Interaction

In this book the reader will find a collection of 31 papers presenting different facets of Human Computer Interaction, the result of research projects and experiments as well as new approaches to design user interfaces. The book is organized according to the following main topics in a sequential order: new interaction paradigms, multimodality, usability studies on several interaction mechanisms, human factors, universal design and development methodologies and tools

User perspective on AM-enabled mass customisation toolkits

Mass Customisation (MC) toolkits are powerful user interfaces that enable customers to engage in the design of their own products. This research follows design research methodology (integrated with design process) to research the user perspective on AM-enabled MC toolkits. This research proposes and validates a design framework to guide designers and software developers in designing a user-centred AM-enabled MC toolkits, enabled using digital fabrication technologies such as Additive Manufacturing (AM). This framework includes pre-implementation assessment, and implementation stages. An initial literature review revealed a lack of standard or universal norms for these user interfaces, and a lack of consistency in their design, in which web objects such as logo, product image, prices, etc. are not shared commonly among toolkits, nor occupy a frequent position. Furthermore, an optimum number of degree of freedom for MC toolkits is lacking from current design knowledge. This research focuses on AM-enabled Mass Customisation toolkits as a means to enable customers design; its concentration is on users. A first quantitative study was conducted to compare and rank of a collection of features. More detailed user requirements regarding the content and layout of MC toolkits were revealed in a workshop. As a part of the second study, four different CAD systems (software programs and 3D-enabling libraries) were used to create MC toolkits. This provided an understanding of the pros and cons of each system, and demonstrated Three.js to be the best system amongst each one s feasibility and application. Based on previous findings, and as a part of the UX-design process, a prototype web-based MC toolkit was constructed, utilising the Three.js library. The prototype was used for a second study as a platform to investigate, the user interaction and usability of the toolkit, to validate the toolkit design as well as provide insights for its improvement. Findings and reflections from all the studies were then visualised and communicated in an interactive design framework. A final study, conducted with professional users (N=4) assessed the usability and technicality of the framework tool and led to a number of suggested improvements. The main contributions to knowledge are: 1- a table was produced to compare the features of four different system, by which Three.js was identified as the most suitable among them 2- most important and expected features for the content were obtained from the user rankings, most frequent location of features for the layout was identified based on the users, and user insights were reflected based on the evaluation of the prototype 3- the UI needs to be flexible in term of degrees of freedom, in another words, each customer (novice or professional) is able to adjust the number of options presented. 4- a framework was proposed through reviewing and adapting existing guidelines and findings from this research