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

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.

Trident is a proprietary browser engine for the Microsoft Windows version of Internet Explorer, developed by Microsoft.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

<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.

A TV site is a website designed for viewing on a television set.

<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.

<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.

<span class="mw-page-title-main">Android Ice Cream Sandwich</span> Ninth version of the Android operating system

Android Ice Cream Sandwich was the fourth major version of the Android mobile operating system developed by Google. Unveiled on October 19, 2011, Android 4.0 built upon the significant changes made by the tablet-only release Android Honeycomb, in an effort to create a unified platform for both smartphones and tablets. The first phone with Android Ice Cream Sandwich was Samsung Galaxy Nexus.

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">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">Progressive web app</span> Specific form of single page web application

A progressive web application (PWA), or progressive web app, is a type of web app that can be installed on a device as a standalone application. PWAs are installed using the offline cache of the device's web browser.

<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 smart devices, including 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 & unveiled at Samsung Developer Conference in 2018, and was updated 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.