2,898 research outputs found
ORC Layout: Adaptive GUI Layout with OR-Constraints
We propose a novel approach for constraint-based graphical user interface (GUI) layout based on OR-constraints (ORC) in standard soft/hard linear constraint systems. ORC layout unifies grid layout and flow layout, supporting both their features as well as cases where grid and flow layouts individually fail. We describe ORC design patterns that enable designers to safely create flexible layouts that work across different screen sizes and orientations. We also present theORC Editor, a GUI editor that enables designers to apply ORC in a safe and effective manner, mixing grid, flow and new ORC layout features as appropriate. We demonstrate that our prototype can adapt layouts to screens with different aspect ratios with only a single layout specification, easing the burden of GUI maintenance. Finally, we show that ORC specifications can be modified interactively and solved efficiently at runtime
ORCSolver: An Efficient Solver for Adaptive GUI Layout with OR-Constraints
OR-constrained (ORC) graphical user interface layouts unify conventional
constraint-based layouts with flow layouts, which enables the definition of
flexible layouts that adapt to screens with different sizes, orientations, or
aspect ratios with only a single layout specification. Unfortunately, solving
ORC layouts with current solvers is time-consuming and the needed time
increases exponentially with the number of widgets and constraints. To address
this challenge, we propose ORCSolver, a novel solving technique for adaptive
ORC layouts, based on a branch-and-bound approach with heuristic preprocessing.
We demonstrate that ORCSolver simplifies ORC specifications at runtime and our
approach can solve ORC layout specifications efficiently at near-interactive
rates.Comment: Published at CHI202
Responsive and Personalized Web Layouts with Integer Programming
Over the past decade, responsive web design (RWD) has become the de facto standard for adapting web pages to a wide range of devices used for browsing. While RWD has improved the usability of web pages, it is not without drawbacks and limitations: designers and developers must manually design the web layouts for multiple screen sizes and implement associated adaptation rules, and its "one responsive design fits all"approach lacks support for personalization. This paper presents a novel approach for automated generation of responsive and personalized web layouts. Given an existing web page design and preferences related to design objectives, our integer programming -based optimizer generates a consistent set of web designs. Where relevant data is available, these can be further automatically personalized for the user and browsing device. The paper includes presentation of techniques for runtime adaptation of the designs generated into a fully responsive grid layout for web browsing. Results from our ratings-based online studies with end users (N = 86) and designers (N = 64) show that the proposed approach can automatically create high-quality responsive web layouts for a variety of real-world websites.Peer reviewe
Reverseorc:Reverse engineering of resizable user interface layouts with or-constraints
Reverse engineering (RE) of user interfaces (UIs) plays an important role in
software evolution. However, the large diversity of UI technologies and the
need for UIs to be resizable make this challenging. We propose ReverseORC, a
novel RE approach able to discover diverse layout types and their dynamic
resizing behaviours independently of their implementation, and to specify them
by using OR constraints. Unlike previous RE approaches, ReverseORC infers
flexible layout constraint specifications by sampling UIs at different sizes
and analyzing the differences between them. It can create specifications that
replicate even some non-standard layout managers with complex dynamic layout
behaviours. We demonstrate that ReverseORC works across different platforms
with very different layout approaches, e.g., for GUIs as well as for the Web.
Furthermore, it can be used to detect and fix problems in legacy UIs, extend
UIs with enhanced layout behaviours, and support the creation of flexible UI
layouts.Comment: CHI2021 Full Pape
User Interfaces in iOS and Windows Phone: a comparison
This term paper contains a comparison between iOS and Windows Phone, regarding especially the user interface. Chapter 1 deals with a brief description of the evolution of the two platforms. In Chapter 2, the user interface principles and guidelines are put into comparison, with a deeper analysis of the Windows Phone ones. Chapter 3 carries out a technical examination of the management of various user interface problems, like layouts, different screen resolutions and orientation changesope
ORC Layout: Adaptive GUI Layout with OR-Constraints
We propose a novel approach for constraint-based graphical user interface
(GUI) layout based on OR-constraints (ORC) in standard soft/hard linear
constraint systems. ORC layout unifies grid layout and flow layout, supporting
both their features as well as cases where grid and flow layouts individually
fail. We describe ORC design patterns that enable designers to safely create
flexible layouts that work across different screen sizes and orientations. We
also present the ORC Editor, a GUI editor that enables designers to apply ORC
in a safe and effective manner, mixing grid, flow and new ORC layout features
as appropriate. We demonstrate that our prototype can adapt layouts to screens
with different aspect ratios with only a single layout specification, easing
the burden of GUI maintenance. Finally, we show that ORC specifications can be
modified interactively and solved efficiently at runtime
Reflow: Automatically Improving Touch Interactions in Mobile Applications through Pixel-based Refinements
Touch is the primary way that users interact with smartphones. However,
building mobile user interfaces where touch interactions work well for all
users is a difficult problem, because users have different abilities and
preferences. We propose a system, Reflow, which automatically applies small,
personalized UI adaptations, called refinements -- to mobile app screens to
improve touch efficiency. Reflow uses a pixel-based strategy to work with
existing applications, and improves touch efficiency while minimally disrupting
the design intent of the original application. Our system optimizes a UI by (i)
extracting its layout from its screenshot, (ii) refining its layout, and (iii)
re-rendering the UI to reflect these modifications. We conducted a user study
with 10 participants and a heuristic evaluation with 6 experts and found that
applications optimized by Reflow led to, on average, 9% faster selection time
with minimal layout disruption. The results demonstrate that Reflow's
refinements useful UI adaptations to improve touch interactions
The Use of SMIL: Multimedia Research Currently Applied on a Global Scale
This paper describes the current use of the multimedia standard SMIL. SMIL features that relate to active areas of multimedia research are discussed. SMIL current implementation in existing browsers is described. Examples from the Web of SMIL applications representing different types of multimedia are presented. These discussions together provide an overview of how SMIL currently addresses the needs of multimedia distributed on the Web
DESIGN WITH EMOTION: IMPROVING WEB SEARCH EXPERIENCE FOR OLDER ADULTS
Research indicates that older adults search for information all together about 15% less than younger adults prior to making decisions. Prior research findings associated such behavior mainly with age-related cognitive difficulties. However, recent studies indicate that emotion is linked to influence search decision quality. This research approaches questions about why older adults search less and how this search behavior could be improved. The research is motivated by the broader issues of older users\u27 search behavior, while focusing on the emotional usability of search engine user interfaces. Therefore, this research attempts to accomplish the following three objectives: a) to explore the usage of low level design elements as emotion manipulation tools b) to seamlessly integrate these design elements into currently existing search engine interfaces, and finally c) to evaluate the impact of emotional design elements on search performance and user satisfaction. To achieve these objectives, two usability studies were conducted. The aim of the first study was to explore emotion induction capabilities of colors, shapes, and combination of both. The study was required to determine if the proposed design elements have strong mood induction capabilities. The results demonstrated that low level design elements such as color and shape have high visceral effects that could be used as potentially viable alternatives to induce the emotional states of users without the users having knowledge of their presence. The purpose of the second study was to evaluate alternative search engine user interfaces, derived from this research, for search thoroughness and user preference. In general, search based performance variables showed that participants searched more thoroughly using interface types that integrate angular shape features. In addition, user preference variables also indicated that participants seemed to enjoy search tasks using search engine interfaces that used color/shape combinations. Overall, the results indicated that seamless integration of low level emotional design elements into currently existing search engine interfaces could potentially improve web search experience
- …