T Layout

Last updated

The T-Layout is an architectural and design concept for web applications, specifically tailored to improve the user experience on mobile devices. It features a horizontally scrollable container divided into three distinct sections, each spanning the full width of the screen, and was developed to optimise space usage and streamline navigation. [1] [2] [3]

Contents

Background

The T-Layout introduces horizontal scrolling as a complementary method to the conventional pop-up-based navigation system in mobile web applications. [4] In this layout, the central section which is visible by default upon accessing the application, facilitates the main content of a URL address and is flanked by two "helper" sections. This approach minimises the need for extensive user movements, in order to reach navigation controls typically located at the top of the screen. [5] [6]

It is aimed at enhancing the user experience on mobile devices by providing an easier way to access essential content such as the main navigation, e-commerce related screens, or user account related information, ensuring that those elements are readily accessible while requiring minimal user effort. [7]

The T-Layout was first implemented by E (e-streetwear.com) in their mobile web app layout, and it was inspired by the interfaces of well-tested native mobile apps like Instagram and Revolut. [5] [1]

A study titled "Mobile Navigation and User Preferences Survey" indicated a preference among mobile app users for one-handed usage, primarily navigating with their thumb. [8] These insights led to the T-Layout Experiment, which compared the efficiency of using swipe gestures to access navigational elements against reaching traditional navigation controls. [2]

Development history

It was first released as the mobile layout of E in early 2023. It was originally developed based on six principles: user-centric functionality, lightweight filesize, HTML and CSS implementation with minimal or no use of JavaScript required, suitable both for browser and server-rendering architectures, intuitive design, and improved SEO. [4] [7]

The development of the T-Layout was driven by the necessity for more ergonomic and user-friendly interfaces in mobile web applications. Its design, reminiscent of the letter 'T', emerged as a solution to several usability challenges mobile device users face, emphasising ease of access and efficient screen space utilisation. [1]

In July 2023, E formalised the concept and its technical specifications, introducing it to the web design and development community. [7]

In October 2023 the "Mobile Navigation and User Preferences Survey" was conducted, establishing that the vast majority of individuals prefer to use mobile applications by holding the phone in a one-handed grip, utilising only the thumb for gestures when possible. [8]

The subsequent "T-Layout Experiment", designed to measure the time in seconds and the distance (user effort) in pixels, required to access navigational elements by traditionally tapping on fixed-positioned controls compared to swiping anywhere on the screen. The results proved that swipe gestures require less time and much less effort. [2]

Styling and features

The main characteristic of the T-Layout is its horizontal scrolling feature, which can improve navigation efficiency while preserving the functionality of traditionally structured user interfaces. [5]

Its Implementation can be achieved with a combination of HTML and styling with CSS as well as precompiled Scss and Sass, CSS-in-JS, and styled JSX. It can be either a purely HTML/CSS solution but JavaScript can be utilised as well to add more specific functionalities, while It can be implemented to both existing and new applications. Its application in server-side rendering architectures will ensure that all its underlying principles apply. [4] [7]

Although principally each section in the layout has a distinct role and facilitates specific types of content, the T-Layout as a concept is versatile, and it is adaptable allowing modifications in the layout or how it's implemented to cater to the specific needs of different applications. [8]

See also

Related Research Articles

<span class="mw-page-title-main">Graphical user interface</span> User interface allowing interaction through graphical icons and visual indicators

A graphical user interface, or GUI, is a form of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation. In many applications, GUIs are used instead of text-based UIs, which are based on typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on a computer keyboard.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

<span class="mw-page-title-main">Website wireframe</span> Visual guide that represents the skeletal framework of a website

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The term wireframe is taken from other fields that use a skeletal framework to represent 3 dimensional shape and volume. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually driven by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and by those with expertise in interaction design, information architecture and user research.

<span class="mw-page-title-main">User interface design</span> Planned operator–machine interaction

User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. In computer or software design, user interface (UI) design primarily focuses on information architecture. It is the process of building interfaces that clearly communicate to the user what's important. UI design refers to graphical user interfaces and other forms of interface design. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals.

<span class="mw-page-title-main">Sleipnir (web browser)</span> Web browser developed by Fenrir Inc

Sleipnir is a tabbed web browser developed by Fenrir Inc. The browser's main features are customization and tab functions. It supports HTML5 and multiple layout engines.

Mobile app development is the act or process by which a mobile app is developed for one or more mobile devices, which can include personal digital assistants (PDA), enterprise digital assistants (EDA), or mobile phones. Such software applications are specifically designed to run on mobile devices, taking numerous hardware constraints into consideration. Common constraints include CPU architecture and speeds, available memory (RAM), limited data storage capacities, and considerable variation in displays and input methods. These applications can be pre-installed on phones during manufacturing or delivered as web applications, using server-side or client-side processing to provide an "application-like" experience within a web browser.

User experience design, upon which is the centralized requirements for "User Experience Design Research", defines the experience a user would go through when interacting with a company, its services, and its products. User experience design is a user centered design approach because it considers the user's experience when using a product or platform. Research, data analysis, and test results drive design decisions in UX design rather than aesthetic preferences and opinions, for which is known as UX Design Research. Unlike user interface design, which focuses solely on the design of a computer interface, UX design encompasses all aspects of a user's perceived experience with a product or website, such as its usability, usefulness, desirability, brand perception, and overall performance. UX design is also an element of the customer experience (CX), and encompasses all design aspects and design stages that are around a customer's experience.

<span class="mw-page-title-main">Sidebar (computing)</span> User interface element on side of computer screen

The sidebar is a graphical control element that displays various forms of information to the right or left side of an application window or operating system desktop. Examples of the sidebar can be seen in the Opera web browser, Apache web OpenOffice, LibreOffice, SoftMaker Presentations and File Explorer; in each case, the app exposes various functionalities via the sidebar.

SpringBoard is the standard application that manages the iPhone's home screen. Other tasks include starting WindowServer, launching and bootstrapping applications, and setting some of the device's settings on startup.

<span class="mw-page-title-main">TouchWiz</span> User interface by Samsung Electronics

TouchWiz is a discontinued user interface developed by Samsung Electronics with partners, featuring a full touch user interface. It is sometimes incorrectly referred to as an operating system. TouchWiz was used internally by Samsung for smartphones, feature phones and tablet computers, and was not available for licensing by external parties. The Android version of TouchWiz also comes with the Samsung-made app store Galaxy Apps. It was replaced by Samsung Experience in 2017 with the release of Android 7.0 “Nougat”*

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

A mobile application or app is a computer program or software application designed to run on a mobile device such as a phone, tablet, or watch. Mobile applications often stand in contrast to desktop applications which are designed to run on desktop computers, and web applications which run in mobile web browsers rather than directly on the mobile device.

Foundation is a free responsive front-end framework, providing a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Foundation is an open source project, and was formerly maintained by ZURB. Since 2019, Foundation has been maintained by volunteers.

<span class="mw-page-title-main">Samsung Galaxy Note 3</span> 2013 Android smartphone by Samsung

The Samsung Galaxy Note 3 is an Android phablet smartphone produced by Samsung Electronics as part of the Samsung Galaxy Note series. The Galaxy Note 3 was unveiled on September 4, 2013, with its worldwide release beginning later in the month. Serving as a successor to the Galaxy Note II, the Note 3 was designed to have a lighter, more upscale design than previous iterations of the Galaxy Note series, and to expand upon the stylus and multitasking-oriented functionality in its software—which includes a new pie menu opened through the button on the stylus for quick access to pen-enabled apps, along with pop-up apps and expanded multi-window functionality. It additionally features new sensors, a USB 3.0 port, 3 GB of RAM, and its video camera has been upgraded to 2160p (4K) resolution and doubled framerate of 60 at 1080p, placing it among the earliest smartphones to be equipped with any of these.

<span class="mw-page-title-main">Ionic (mobile app framework)</span> Open-source framework to develop hybrid mobile apps

Ionic is an open-source UI toolkit for building cross-platform mobile, web, and desktop applications using web technologies such as HTML, CSS, and JavaScript/TypeScript. It provides a set of pre-designed UI components and tools for building high-quality, interactive applications. Ionic was originally built as a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. The original version was released in 2013 and built on top of AngularJS and Apache Cordova. However, the latest release was re-built as a set of Web Components using StencilJS, allowing the user to choose any user interface framework, such as Angular, React or Vue.js. It also allows the use of Ionic components with no user interface framework at all. Ionic provides tools and services for developing hybrid mobile, desktop, and progressive web apps based on modern web development technologies and practices, using Web technologies like CSS, HTML5, and Sass. In particular, mobile apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by utilizing Cordova or Capacitor.

<span class="mw-page-title-main">Hamburger button</span> User interface element

The hamburger button, so named for its unintentional resemblance to a hamburger, is a button typically placed in a top corner of a graphical user interface. Its function is to toggle a menu or navigation bar between being collapsed behind the button or displayed on the screen. The icon which is associated with this widget, consisting of three horizontal bars, is also known as the collapsed menu icon.

<span class="mw-page-title-main">Android Pie</span> Ninth major version of the Android mobile operating system

Android Pie, also known as Android 9 is the ninth major release and the 16th version of the Android mobile operating system. It was first released as a developer preview on March 7, 2018, and was released publicly on August 6, 2018.

<span class="mw-page-title-main">One UI</span> Software overlay by Samsung Electronics Limited

One UI is a user interface (UI) developed by Samsung Electronics for its Android devices running Android 9 "Pie" and later. Succeeding Samsung Experience, it is designed to make using larger smartphones easier and be more visually appealing. It was announced at Samsung Developer Conference in 2018, and was unveiled in Galaxy Unpacked in February 2019 alongside the Galaxy S10 series, Galaxy Buds and the Galaxy Fold.

References

  1. 1 2 3 "The Future of Mobile Web Design: The Impact of the T Layout". Witans, University of South California. Retrieved 2024-01-06.
  2. 1 2 3 Tsinalis, Jacob (2023-11-02). "T Layout: Enhancing Mobile User Experience through Innovative Web Design". Academia.edu. Retrieved 2024-01-05.
  3. ↑ "T Layout". E. Retrieved 2024-01-22.
  4. 1 2 3 Dobie, Emma (2023-10-05). "Comprehensive Guide to Implementing the T Layout in Web Applications". Pressbooks, University of Minnesota. Retrieved 2024-01-06.
  5. 1 2 3 "T Layout: A Review of its Impact on Mobile Web Application Design". tagteam.harvard.edu. Retrieved 2024-01-06.
  6. ↑ "T Layout Technical Specifications". E. Retrieved 2024-01-22.
  7. 1 2 3 4 Tsinalis, Jacob (2023). "An Overview of the T-Layout in Web Design and Development". ResearchGate. doi:10.13140/RG.2.2.33773.97764.
  8. 1 2 3 "Understanding Mobile User Preferences: An Analysis of the Mobile UX Survey - Stanford SpanLabWiki". web.stanford.edu. Retrieved 2024-01-06.


This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.