Self-report mobile user interface design patterns for older adults with rheumatic conditions

Abstract

This work explored how to design self-report mobile apps for people with rheumatic conditions. By recognising the impact of rheumatic conditions on fine motor skills, we wanted to better understand usability issues within current self-report apps and to propose a set of design patterns that could better accommodate for the characteristics of users with rheumatic conditions. The research approach followed was divided into three phases: mobile app search and identification of UI components to test, usability test experiments of UI components, and design patterns definition. The first phase consisted of a systematic mobile app review for rheumatic conditions, which found that the most commonly used UI components were: horizontal sliders, vertical sliders, column selectors, in-line selectors, and selectors incorporated in body graphics. The UI components found were then filtered, to include only those that respected Android or iOS guidelines and those that appeared more often in the reviewed apps. The list of UI components that resulted from this process was then discussed with a group of designers to select the UI components to test. These components were then implemented in a mobile tool used to support the usability experiments that involved a total of 20 people with rheumatic conditions. Metrics such as the subjective preference between UI component alternatives, task completion time, and number of gesture interactions, were statistically analysed to determine the best button height and in-between button sizes, the best characteristics of horizontal and vertical sliders, the best screen positions of the UI components, and the most adequate button width for buttons for body graphics. Based on these results, the third phase of this research consisted of the creation of three UI design patterns for people with rheumatic conditions: (i) RECOMMENDED SLIDER CHARACTERISTICS FOR SLIDERS *, (ii) RECOMMENDED SELECTORS * and (iii) RECOMMENDED SELECTOR SIZE FOR A BODY GRAPHIC **. These design patterns contribute to addressing the current gap in app design by providing guidance to designers developing self-report mobile apps for people with rheumatic conditions.

Este trabalho explorou como desenhar aplicações móveis de autorrelato para pessoas com doenças do reumático. Ao reconhecer o impacto das doenças do reumático nas habilidades motoras finas, quísemos entender melhor os problemas de usabilidade nas aplicações de autorrelato atuais e propor um conjunto de padrões de design que pudessem acomodar melhor as características dos utilizadores com estas doenças. A abordagem de investigação seguida foi dividida em três fases: pesquisa de aplicações móveis e identificação de componentes de interface de utilizador (IU) para teste, experiências de usabilidade de componentes de IU e definição de padrões de design. A primeira fase consistiu na revisão sistemática de aplicações móveis para doenças do reumático e conluiu que os componentes de interface do utilizador mais usados nas aplicações eram: sliders horizontais, sliders verticais, seletores em coluna, seletores em linha e seletores incorporados em gráficos do corpo humano. Esses componentes de IU foram filtrados para incluir apenas aqueles que respeitavam as diretrizes do Android ou iOS e aqueles que apareciam com mais frequência nas aplicações revistas. A lista de componentes de interface do utilizador resultante desse processo foi discutida com um grupo de designers de modo a selecionar os componentes de IU a serem testados. Os componentes de IU finais foram então implementados numa ferramenta móvel usada para apoiar as experiências de usabilidade que envolveram um total de 20 pessoas com doenças do reumático. Métricas como a preferência subjetiva entre alternativas de componentes de IU, tempo de conclusão da tarefa e número de interações de gestos foram analisadas estatisticamente para determinar a melhor altura e espaçamento entre botões, as melhores características de sliders horizontais e verticais, as melhores posições no ecrã dos componentes de IU, e a largura de botões mais adequada para botões para gráficos do corpo humano. Com base nesses resultados, a terceira fase desta investigação consistiu na criação de três padrões de design de interface do utilizador para pessoas com doenças do reumático: (i) CARACTERÍSTICAS RECOMENDADA PARA SLIDERS *, (ii) SELETORES RECOMENDADOS * e (iii) TAMANHO DE SELETOR RECOMENDADO PARA UM GRÁFICO DE CORPO HUMANO **. Os padrões de design criados esperam abordar a lacuna atual no design de aplicações, fornecendo orientação aos designers que desenvolvem aplicações móveis de autorrelato para pessoas com doenças do reumático.