Adaptive UIX Layer for University Information SOA-BUS
Total Page:16
File Type:pdf, Size:1020Kb
80 Informatica Economică vol. 21, no. 2/2017 Adaptive UIX Layer for University Information SOA-BUS Octavian DOSPINESCU, Cătălin STRÎMBEI, Roxana-Marina STRAINU, Alexandra NISTOR Faculty of Economics and Business Administration, AL.I.Cuza University, Iasi [email protected], [email protected], [email protected], [email protected] The user interface (UI) layer is considered one of the key components of software applications since it connects their end-users to functionalities. Well-engineered and robust software applications could eventually fail to be adopted due to a weak UI layer. In the current market, when creating sites, UI designers have to determine how to plan the best interface according to the devices of the users, namely desktops, laptops, tablets or smartphones. Having this in mind, the current paper aims to present the adaptive UIX Layer for a University Information SOA-Bus (UISB) – a topic discussed in previous works [1], [2]. In this respect, we reviewed the literature on responsive and adaptive web design in order to identify the best front-end approach to the UISB. According to our findings, there is a strong debate in the academic field as well in the IT business in what concerns UI design. Recent interests have shown that the new trend in drafting the front-end layer is choosing between a responsive and an adaptive design. While arguments provided by both sides have failed to ease the decision makers’ choices on what type of design to choose, we aim to bring some light on the subject by proposing different layers for the UISB. Keywords: SOA, User Interface, Responsive, Adaptive Introduction a new decision point. The application's 1 The development of User Interfaces (UI) structure is provided to UIX in configuration has been a topic of interest both for academia files, which can be ASCII files, databases, or and industry since the early 1980s. During the resource files. UIX includes Java class time a constant evolution has occurred in the libraries, APIs, XML languages, and other field and such an evolution has been coupled technologies for developing different aspects with a continuous effort to develop new of web-based applications [5]. methods and strategies to create UIs in effective and efficient ways [3]. 2 Responsive Web Design (RWD) UIX (User Interface XML) is a set of Nowadays, responsive design has become a technologies that constitute a framework for major trend in web development due to the building web applications. The main focus of high diversity of devices used for web UIX is the user presentation layer of an browsing. According to [6] applying application, with additional functionality for responsive design to existing web sites managing events and the state of the implies major reengineering due to the application flow. UIX is designed to create underlying fluid grid process. Likewise, applications with page-based navigation, such responsive design is limited to desktop-to- as an online human resources application, mobile adaptation. rather than full-featured applications requiring The expression ‘responsive web design’ has advanced interaction, such as an integrated earned popularity in 2010 when the web development environment (IDE) [4]. designer and developer Ethan Marcotte wrote An application can interact with UIX in an article on the subject [7]. The same author predefined places called decision points, considers that the goal of RWD consists in where a decision is made by the operator or a making a web page look equally good no certain action routine is automatically matter the screen size of a device. Before the triggered. Execution of an action terminates in introduction of responsive web design, web DOI: 10.12948/issn14531305/21.2.2017.07 Informatica Economică vol. 21, no. 2/2017 81 designers and developers created most The content stays the same – having this websites by following the principles of pixel- in mind, using RWD reduces the need to perfect web design. Pixel-perfect web design change or ‘adapt’ the interface website for treats a web page like a page from a magazine. different versions. Moreover, the Content In this approach, the mock-up of a web page Management System (CMS) remains is first created in Photoshop, and then a unmodified, the need to duplicate content developer recreates that design to fit a web entry according to different screen types browser. The goal of pixel-perfect web design being eliminated. is to make a web page resemble the original It can be easily achieved automatically mock-up as much as possible. But a web page – in order to determine the width of the is not printed on a piece of paper but viewed browser or device there can be used CSS in a web browser. Unlike paper, a web (cascading style sheets), media queries or browser is a dynamic medium. It allows a user HTML5, the existing content being to re-size the browser window itself, and users adjusted or stacked to fit automatically the can also change the size of the font as well. space available [11]. And when this happens, web pages created Cost – in comparison with the Adaptable with pixel-perfect web design principles often Web Design the Responsive one is break. If a web page was optimized for a 1024 cheaper and less time consuming. × 768 pixel screen size, for example, that web Although the advantages shown make of page will look quite wrong in a smaller or RWD an attractive choice when designing bigger screen [8]. interfaces, the same author recalls some As the number of mobile devices that have a limitations as: variety of screen sizes grows, pixel-perfect Generic not optimized experience – web design has become problematic. when accessing a site with RWD Responsive web design is an attempt to solve interface, the user does not benefit of a this problem with the following three tools fully optimized experience in accordance [9]: with the device they are using. a flexible, grid-based layout; No accounting for users’ behavioral flexible images; differences with different mediums. The media queries. evidence indicates that users behave very Flexible grids are created by using percentage differently when using smartphones and (a relative unit) instead of pixel (an absolute desktops, so ideally a mobile website unit). Media queries make it possible to apply should be adapted to these behavioral different cascading style sheets (CSS) changes [11]. depending on the media type and the Loading time issues. Websites with lots maximum width of the device screen. With of HTML code and multimedia take far cascading style sheets, one can control images longer to load on a mobile device with a and other fixed-width elements so that they 3G connection and a smaller CPU than on stay contained in their container blocks. a desktop with broadband. As the content Responsive web design makes a web page doesn’t change between environments, adjust itself in response to the screen size of a with responsive websites, mobile users are device. This means that there is no longer one kept waiting [11]. fixed layout in which the elements of a web A responsive design can have multiple page are permanently placed. Instead, as the breakpoints, say for a small-screen phone, size of the screen changes, the layout of a web then a large-screen phone, then a tablet, then a page adjusts itself and rearranges the elements laptop/desktop. Many teams try to decide on of the page. breakpoints using average screen sizes. According to [10] and [11], responsive web However, it’s better to look at what the design is used by many digital agencies due to content and navigation wants to be. By letting its specific advantages, namely: the content and navigation drive the DOI: 10.12948/issn14531305/21.2.2017.07 82 Informatica Economică vol. 21, no. 2/2017 breakpoints, teams find they can often get devices) [13]. Plasticity design suggests that away with fewer screen configurations. For the contexts are known at design time. The example, a high-resolution Retina iPad might concept evolved to consider the user’s context easily share the same configuration as a well- and more recent researches on plasticity constructed laptop display, while lower introduced the consideration of time context resolution tablets might just need a little by using learning systems to depict users’ adjustment to that same configuration. preferences and habits [14]. Plasticity focuses on modelling multi-target interfaces, 3 Adaptive User Interfaces distributed interfaces, physical environment, Adaptive User Interfaces (AUI) are particular hardware and software capabilities and tasks. context-aware systems that aim at generating The mechanism of adaptation is commonly user interfaces relevant to the user’s profile, dealt through Service Oriented Architecture task and environment [12]. The AUI research [12] or component based approach. domain comes from the crossover of the Another approach to context-aware interfaces personalization domain (which consists in is the USer Interface eXtensible Markup allowing the user to manually customize the Language (UsiXML) (Limbourg, 2005). interface) and the context-awareness. Hence, UsiXML is a user interface description AUI focus on providing a user interface well language that aims at modeling relevant suited to the user and its task with as less as aspects of the interfaces to support context- possible user intervention. The main aware application. For this purpose, UsiXML challenge for AUI is to design their introduced the “μ7” concept which consists in mechanisms so that the usability is preserved the design of “multi-device, multi-platform, [8]. multi-user, multi-linguality / culturality, Unlike standard context-aware systems, AUI multi-organization, multi-context and multi- promote a re-organization or a re-distribution modality” enabled interfaces. UsiXML of a user interface where context-aware models are partly based on the works on systems associate a unique interface per plasticity and propose models to enable the service.