The T-Layout is an architectural and design concept for
web application
A web application (or web app) is application software that is created with web technologies and runs via a web browser. Web applications emerged during the late 1990s and allowed for the server to dynamically build a response to the request, ...
s, specifically tailored to improve the
user experience
User experience (UX) is how a user interacts with and experiences a product, system or service. It includes a person's perceptions of utility, ease of use, and efficiency. Improving user experience is important to most companies, designers, a ...
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.
Background
The T-Layout introduces
horizontal scrolling as a complementary method to the conventional pop-up-based
navigation system
A navigation system is a computing system that aids in navigation. Navigation systems may be entirely on board the vehicle or vessel that the system is controlling (for example, on the ship's bridge) or located elsewhere, making use of radio or oth ...
in mobile web applications.
In this
layout
In general terms, a layout is a structured arrangement of items within certain limits, or a plan for such arrangement.
Specifically, layout may refer to:
* Page layout, the arrangement of visual elements on a page
** Comprehensive layout (comp), ...
, 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.
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
E-commerce (electronic commerce) refers to commercial activities including the electronic buying or selling products and services which are conducted on online platforms or over the Internet. E-commerce draws on technologies such as mobile co ...
related screens, or
user account
A user is a person who uses a computer or network service.
A user often has a user account and is identified to the system by a username (or user name).
Some software products provide services to other systems and have no direct end use ...
related information, ensuring that those elements are readily accessible while requiring minimal user effort.
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
Instagram is an American photo sharing, photo and Short-form content, short-form video sharing social networking service owned by Meta Platforms. It allows users to upload media that can be edited with Social media camera filter, filters, be ...
and
Revolut
Revolut Group Holdings Ltd, doing business as Revolut, is a British multinational neobank and fintech company that offers banking services for individuals and businesses. It was founded in July 2015 by British-Russian-French businessman Niko ...
.
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.
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.
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
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets ( ...
and
CSS implementation with minimal or no use of
JavaScript
JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior.
Web browsers have ...
required, suitable both for browser and server-rendering
architectures, intuitive
design
A design is the concept or proposal for an object, process, or system. The word ''design'' refers to something that is or has been intentionally created by a thinking agent, and is sometimes used to refer to the inherent nature of something ...
, and improved
SEO.
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
Usability can be described as the capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience. In software engineering, usability is the degree to which a softw ...
challenges mobile device users face, emphasising ease of access and efficient screen space utilisation.
In July 2023, E formalised the concept and its
technical specifications
A specification often refers to a set of documented requirements to be satisfied by a material, design, product, or service. A specification is often a type of technical standard.
There are different types of technical or engineering specificati ...
, introducing it to the web design and development community.
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.
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.
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 interface
In the industrial design field of human–computer interaction, a user interface (UI) is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine fro ...
s.
Its Implementation can be achieved with a combination of HTML and styling with CSS as well as precompiled
Scss and
Sass
Sass, Saß or SASS may refer to:
Businesses and organizations
* Safe Amplification Site Society, a Canadian non-profit organization
* Shanghai Academy of Social Sciences, a Chinese think tank
* Society for the Advancement of Scandinavian Study
...
,
CSS-in-JS
CSS-in-JS is a styling technique by which JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a element) and attached into the DOM. It enables the abstraction of CSS to the component level itself ...
, 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
Server-side scripting is a technique used in web development which involves employing scripts on a web server which produces a response customized for each user's (client's) request to the website. Scripts can be written in any of a number of s ...
architectures will ensure that all its underlying principles apply.
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.
See also
*
Design thinking
Design thinking refers to the set of Cognition, cognitive, strategic and practical procedures used by designers in the process of designing, and to the body of knowledge that has been developed about how people reason when engaging with design prob ...
*
Interaction design
Interaction design, often abbreviated as IxD, is "the practice of designing interactive digital products, environments, systems, and services." While interaction design has an interest in form (similar to other design fields), its main area of foc ...
*
Look and feel
In software design, the look and feel of a graphical user interface comprises aspects of its design, including elements such as colors, shapes, layout, and typefaces (the "look"), as well as the behavior of dynamic elements such as buttons, boxes ...
*
Mobile interaction
Mobile interaction is the study of interaction between mobile users and computers. Mobile interaction is an aspect of human–computer interaction that emerged when computers became small enough to enable mobile usage, around the 1990s.
Mobile de ...
*
Principles of user interface design
The principles of user interface design are intended to improve the quality of user interface design. According to Lucy Lockwood's approach of usage-centered design, these principles are:
* ''The structure principle'': Design should organize the ...
*
User-centered design
User-centered design (UCD) or user-driven development (UDD) is a framework of processes in which usability goals, user characteristics, environment, tasks and workflow of a product, service or brand are given extensive attention at each stag ...
References
External links
The T Layout Experiment ''E.'' Retrieved 2024-01-06.
Mobile UX Preferences Survey ''E.'' Retrieved 2024-01-06.
{{DEFAULTSORT:T Layout
Responsive web design
Web applications
Web development
Mobile web
Usability
Design
A design is the concept or proposal for an object, process, or system. The word ''design'' refers to something that is or has been intentionally created by a thinking agent, and is sometimes used to refer to the inherent nature of something ...
Information architecture
Design
Human–computer interaction
Web design
Communication design
Internet properties established in 2010