SlideShare una empresa de Scribd logo
1 de 7
The Touch screen Revolution and Its Impact on UX
With Windows 8, Microsoft brought their desktop user interface in line with their
Windows Phone – making the overall experience more intuitive for touchscreen
users. Apple on the hand have slowly been making chances to OSX, with features
shared between mobile and desktop operating features. A touchscreen Mac may
not exist yet but the touchscreen revolution is definitely upon us.
The regular use of touchscreen means web design has to adapt. Designers must
decide how they adapt their projects to suit users without mouse and keyboard
access and although the development of separate mobile interfaces was the initial
move, it’s now much more sensible to design responsively.
Mobile Focused or Responsive Design
Many designers choose to create secondary websites or even apps
specifically designed for touchscreen users. This gives the designer the
chance to focus specifically on individual types of user in turn. One
problem with a separate website is that a URL redirection is necessary and
there’s more scope for error.
The major problem however that the mobile version is a watered down
version of the desktop website. Features are missing and options are
reduced. This doesn’t have to be the case. Responsive design provides the
same quality experience across all platforms.
Design Differences
The basic design differences between a touchscreen and desktop need to
be understood.
Touchscreens require an upward swipe to scroll down whilst on a desktop
you manually scroll downwards. Buttons need to be designed bigger on
mobile devices as tapping is less accurate than when clicking a mouse.
Users will just be infuriated when they’re trying to press in too small an
activation space. Mobile touchscreens also have no cursor so pinpointing
is harder – further highlighting the need for larger ‘touchable’ areas.
Screen Orientation and Aspect Ratio
There is no standard screen size any more. The range of different screen sizes is
vast and standardised resolutions are no longer clear cut. Mobile screens are
even more complex with the ability to flip from portrait to landscape whilst in
use.
This issue is solved by liquid layouts. This type of layout self adjusts to any
resolution or orientation. Liquid layouts can also be designed to change
significantly when viewed via mobile devices to put control and user-friendliness
at the heart of the design.
Horizontal Scrolling
The traditional scroll runs from top to bottom but Apple and the Amazon Kindle
brought horizontal scrolling into the picture. It’s an essential element of many
mobile apps and is the only way to mimic the true experience of reading a book
via an e-reading device.
Some sites may choose to add buttons to appear as if the action isn’t horizontal
scrolling but switching between pages in reality it’s the same design element
with just an additional button coded in.
Which interface is right?
Not every user interface is suitable for every type of website. Before starting
any project web design professionals need to ask:
• Who is the target audience?
• What is being ‘sold’?
• What impression does the client want to give?
You also need to keep in mind the demographic of users. It’s not all 18-25 year
old but it is more likely younger users will access the site via their mobile
device. For an effective user interface you’ve got to offer your users simplicity.
Big buttons may not be the most attractive idea but they are usually necessary
for successful mobile design. Below are some key features of a successful
mobile user interface.
Radial Menus
Using a radial or pie menu is a great example of intuitive design. It makes access
to the inner pages needed much easier for mobile users who can easily get lost in
endless submenus and drop-downs as common in desktop design.
Skeuomorphism
Meaning an element which resembles a real life thing (like the folders on your
Desktop) skeuomorphism engenders familiarity. Familiarity adds further
intuitiveness to any user interface. A successful design that incorporates
skeuomorphism means that from a quick glance you’ll understand the purpose of
the page.
Minimalism
Minimalism is one of the simplest and most effective ways of creating an intuitive
and effective mobile-friendly design. Stripped back to just essential elements the
message of website is key and it’s so sparse and simple that it’s easy to use via
smaller screens. Flat design also comes under this umbrella and works on the
assumption that intuition no longer matters. Interfaces and their uses are now so
obvious and commonly used that a user interface no longer needs to guide the
user, it can simply be a tool.
Touchscreen technology cannot be ignored and the development and interest in
flat and responsive design means it can be incorporated without too much
separate work.

Más contenido relacionado

Último

一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
cyebo
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
JIT KUMAR GUPTA
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
cyebo
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
ajroy0196
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
Jaime Brown
 

Último (20)

BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
spColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdfspColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdf
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 

Destacado

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
Simplilearn
 

Destacado (20)

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 

The Touch screen Revolution and Its Impact on UX

  • 1. The Touch screen Revolution and Its Impact on UX With Windows 8, Microsoft brought their desktop user interface in line with their Windows Phone – making the overall experience more intuitive for touchscreen users. Apple on the hand have slowly been making chances to OSX, with features shared between mobile and desktop operating features. A touchscreen Mac may not exist yet but the touchscreen revolution is definitely upon us. The regular use of touchscreen means web design has to adapt. Designers must decide how they adapt their projects to suit users without mouse and keyboard access and although the development of separate mobile interfaces was the initial move, it’s now much more sensible to design responsively.
  • 2. Mobile Focused or Responsive Design Many designers choose to create secondary websites or even apps specifically designed for touchscreen users. This gives the designer the chance to focus specifically on individual types of user in turn. One problem with a separate website is that a URL redirection is necessary and there’s more scope for error. The major problem however that the mobile version is a watered down version of the desktop website. Features are missing and options are reduced. This doesn’t have to be the case. Responsive design provides the same quality experience across all platforms.
  • 3. Design Differences The basic design differences between a touchscreen and desktop need to be understood. Touchscreens require an upward swipe to scroll down whilst on a desktop you manually scroll downwards. Buttons need to be designed bigger on mobile devices as tapping is less accurate than when clicking a mouse. Users will just be infuriated when they’re trying to press in too small an activation space. Mobile touchscreens also have no cursor so pinpointing is harder – further highlighting the need for larger ‘touchable’ areas.
  • 4. Screen Orientation and Aspect Ratio There is no standard screen size any more. The range of different screen sizes is vast and standardised resolutions are no longer clear cut. Mobile screens are even more complex with the ability to flip from portrait to landscape whilst in use. This issue is solved by liquid layouts. This type of layout self adjusts to any resolution or orientation. Liquid layouts can also be designed to change significantly when viewed via mobile devices to put control and user-friendliness at the heart of the design. Horizontal Scrolling The traditional scroll runs from top to bottom but Apple and the Amazon Kindle brought horizontal scrolling into the picture. It’s an essential element of many mobile apps and is the only way to mimic the true experience of reading a book via an e-reading device. Some sites may choose to add buttons to appear as if the action isn’t horizontal scrolling but switching between pages in reality it’s the same design element with just an additional button coded in.
  • 5. Which interface is right? Not every user interface is suitable for every type of website. Before starting any project web design professionals need to ask: • Who is the target audience? • What is being ‘sold’? • What impression does the client want to give? You also need to keep in mind the demographic of users. It’s not all 18-25 year old but it is more likely younger users will access the site via their mobile device. For an effective user interface you’ve got to offer your users simplicity. Big buttons may not be the most attractive idea but they are usually necessary for successful mobile design. Below are some key features of a successful mobile user interface.
  • 6. Radial Menus Using a radial or pie menu is a great example of intuitive design. It makes access to the inner pages needed much easier for mobile users who can easily get lost in endless submenus and drop-downs as common in desktop design. Skeuomorphism Meaning an element which resembles a real life thing (like the folders on your Desktop) skeuomorphism engenders familiarity. Familiarity adds further intuitiveness to any user interface. A successful design that incorporates skeuomorphism means that from a quick glance you’ll understand the purpose of the page. Minimalism Minimalism is one of the simplest and most effective ways of creating an intuitive and effective mobile-friendly design. Stripped back to just essential elements the message of website is key and it’s so sparse and simple that it’s easy to use via smaller screens. Flat design also comes under this umbrella and works on the assumption that intuition no longer matters. Interfaces and their uses are now so obvious and commonly used that a user interface no longer needs to guide the user, it can simply be a tool.
  • 7. Touchscreen technology cannot be ignored and the development and interest in flat and responsive design means it can be incorporated without too much separate work.