This document provides an overview of important considerations for designing user interfaces for mobile touchscreen devices. It discusses factors like device form factors, screen sizes and resolutions, input methods like hard keys and gestures, recommended touch target dimensions, design standards for feedback and buttons, and how environmental factors can impact the user experience. The key lesson is that getting stakeholders aligned on all of these variables is critical for successful mobile UI design.
Visual design principles & practices for web and mobile appsTania Schlatter
These slides are from a one-day class designed to help product teams bridge the gap between applications that look great or are highly functional.
This class, given with the Boston UXPA, provides guidelines and examples about how to make visual design decisions that reinforce usability best practices and create interfaces that people value. Participants learn the characteristics of “visually usable” apps to know what to shoot for, and get an introduction to the visual design “tools” for digital apps – layout, type, color, imagery, and controls and affordances – and how to use them to create appealing applications people can easily understand and use.
A Workshop on how ot teach UX design, based on a one day workshop model. We cover exercise design, how people learn, and how to design the day. Originally Given at General Assemb.ly 12/15/13
Please feel free to reuse with credit.
This talk was done during softshake 2014.
Can you give me a definition of the “User Experience”? I don’t! And the Internet neither. User Experience is a really broad domain from analytics to psychology to interface design.
Come to this talk and I’ll present you what is User Experience and what it means for your product. I’ll also give you some tips to help you improve the experience of your software.
Pouvez vous me donner une définition de “l’Experience utilisateur” (UX)? Moi je ne peux pas! Et l’internet n’y arrive pas non plus. L’expérience utilisateur est un domaine très large couvrant la psychologie, le design d’interface et les mesures de performance.
Durant ce talk, je vous présenterai ce qu’est l’expérience utilisateur et ce que ça implique pour votre travail. Je vous donnerai aussi quelques conseils pour améliorer l’expérience de vos logiciels.
Visual design principles & practices for web and mobile appsTania Schlatter
These slides are from a one-day class designed to help product teams bridge the gap between applications that look great or are highly functional.
This class, given with the Boston UXPA, provides guidelines and examples about how to make visual design decisions that reinforce usability best practices and create interfaces that people value. Participants learn the characteristics of “visually usable” apps to know what to shoot for, and get an introduction to the visual design “tools” for digital apps – layout, type, color, imagery, and controls and affordances – and how to use them to create appealing applications people can easily understand and use.
A Workshop on how ot teach UX design, based on a one day workshop model. We cover exercise design, how people learn, and how to design the day. Originally Given at General Assemb.ly 12/15/13
Please feel free to reuse with credit.
This talk was done during softshake 2014.
Can you give me a definition of the “User Experience”? I don’t! And the Internet neither. User Experience is a really broad domain from analytics to psychology to interface design.
Come to this talk and I’ll present you what is User Experience and what it means for your product. I’ll also give you some tips to help you improve the experience of your software.
Pouvez vous me donner une définition de “l’Experience utilisateur” (UX)? Moi je ne peux pas! Et l’internet n’y arrive pas non plus. L’expérience utilisateur est un domaine très large couvrant la psychologie, le design d’interface et les mesures de performance.
Durant ce talk, je vous présenterai ce qu’est l’expérience utilisateur et ce que ça implique pour votre travail. Je vous donnerai aussi quelques conseils pour améliorer l’expérience de vos logiciels.
My presentation from SourceDevCon 2011 (www.sourcedevcon.eu) about our experiences with Sencha Touch and mobile web development for touch devices in general.
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
Top ten design blindspots for Mobile app developers. Mostly based on my first experiences with Mobile design, as a developer.
Original deck presented at XConf 2011, ThoughtWorks, Pune.
Images used in the keynote are for illustrative purposes only.
Raam Thakrar - Touchnote presentation for TheBigMRaam Thakrar
Presentation given on March 21st, 2011in Bath, UK
App distribution and monetisation - the only things more important than lines of code
Raam is currently co-founder and CEO of Touchnote, an m-commerce start-up selling photo postcards cards. Touchnote recently announced a distribution deal with Sony Ericsson that will see the app embedded on multiple handsets and integrated into the camera and gallery.
Raam's previous varied experience is in strategy and management consulting – in London, Washington DC and Central America.
Each one of us is constantly surrounded by multi-touch technologies in everyday life. We keep our smartphones with us all the time, we work with tablet computers and touch screens. But also in stores, in museums and exhibitions, and on trade fairs, the intuitive touch-gesture on a surface has become second nature to us.
But how exactly does the underlying technology work, and how can businesses make optimal use of them, e.g. at their point of sale (POS)?
The multi-touch experts of Garamantis Interactive Technologies have gathered all information on this ubiquitous technology and “forged” them into one large infographic.
This graphic is addressed to anyone who wants to become an instant expert on multi-touch technology within a few minutes, but particularly to businesses and agencies looking for a way to optimally apply this technology in their work.
You don’t have to be a designer to understand User Experience- if you are a developing a UI, there is a good chance you already know about it. Ever wondered why certain UIs are more usable than others? This session aims to take a step back in development process and encourages you to spend some time thinking on what you are about to develop from a user point of view. It is a light weight/ hand-OFF session on how design thinking can help you in development. So if you are actively involved in developing for the end user or simply interested in learning what design can do for you, come join the session.
These are the slides from my concurrent session "The Magic Touch: Interface Design Best Practices for Touch Screen Devices" at DevLearn 2011 in Las Vegas. Throughout the session I routinely switched to show in-depth live demonstrations and reviews of various apps which are not represented in these slides.
If you have any questions or comments, please contact me via email brian (AT) mediakube (DOT) com.
BHSAD Product Design students created a business model for their course project with ASUS. Creative entrepreneurship in details using Business Model Generation canvas from Alexander Osterwalder.
My presentation from SourceDevCon 2011 (www.sourcedevcon.eu) about our experiences with Sencha Touch and mobile web development for touch devices in general.
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
Top ten design blindspots for Mobile app developers. Mostly based on my first experiences with Mobile design, as a developer.
Original deck presented at XConf 2011, ThoughtWorks, Pune.
Images used in the keynote are for illustrative purposes only.
Raam Thakrar - Touchnote presentation for TheBigMRaam Thakrar
Presentation given on March 21st, 2011in Bath, UK
App distribution and monetisation - the only things more important than lines of code
Raam is currently co-founder and CEO of Touchnote, an m-commerce start-up selling photo postcards cards. Touchnote recently announced a distribution deal with Sony Ericsson that will see the app embedded on multiple handsets and integrated into the camera and gallery.
Raam's previous varied experience is in strategy and management consulting – in London, Washington DC and Central America.
Each one of us is constantly surrounded by multi-touch technologies in everyday life. We keep our smartphones with us all the time, we work with tablet computers and touch screens. But also in stores, in museums and exhibitions, and on trade fairs, the intuitive touch-gesture on a surface has become second nature to us.
But how exactly does the underlying technology work, and how can businesses make optimal use of them, e.g. at their point of sale (POS)?
The multi-touch experts of Garamantis Interactive Technologies have gathered all information on this ubiquitous technology and “forged” them into one large infographic.
This graphic is addressed to anyone who wants to become an instant expert on multi-touch technology within a few minutes, but particularly to businesses and agencies looking for a way to optimally apply this technology in their work.
You don’t have to be a designer to understand User Experience- if you are a developing a UI, there is a good chance you already know about it. Ever wondered why certain UIs are more usable than others? This session aims to take a step back in development process and encourages you to spend some time thinking on what you are about to develop from a user point of view. It is a light weight/ hand-OFF session on how design thinking can help you in development. So if you are actively involved in developing for the end user or simply interested in learning what design can do for you, come join the session.
These are the slides from my concurrent session "The Magic Touch: Interface Design Best Practices for Touch Screen Devices" at DevLearn 2011 in Las Vegas. Throughout the session I routinely switched to show in-depth live demonstrations and reviews of various apps which are not represented in these slides.
If you have any questions or comments, please contact me via email brian (AT) mediakube (DOT) com.
BHSAD Product Design students created a business model for their course project with ASUS. Creative entrepreneurship in details using Business Model Generation canvas from Alexander Osterwalder.
Similar to Elaine Chen: Mobile Touchphone UI Design 101 (20)
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
By Design, not by Accident - Agile Venture Bolzano 2024
Elaine Chen: Mobile Touchphone UI Design 101
1. Mobile Touchphone UI
Design 101
or How I Learned to Stop Worrying and Love
Designing Giant Buttons
Elaine Chen | Art Director, Sapient
StayFresh07 | MaRS Discovery District, Toronto | April 20, 2009
3. The US is ahead of Canada
when it comes to mobile.
What’s a designer to do?
3
4. The first thing you need to know...
Is it a candy bar? Is it a flip? Is it a slide?
4
5. Is there an accelerometer?
Portrait orientation Landscape orientation What if it also has a slider?
This may affect the number of screens you have to design.
5
6. What are the hardkeys?
iPhone Samsung Instinct BlackBerry Storm HTC Diamond
Home Back, Home, Call Call, Home, Back, Home, Back, Call,
End Call End Call, 5-Way Nav
They may affect the navigation standards you put in the UI.
6
7. No standard screen size or resolution.
2.8”
3.5” 3.25”
3.1”
BlackBerry Storm
Samsung Instinct iPhone HTC Diamond
360 x 480
240 x 432 320 x 480 480 x 640
184ppi
159ppi 163ppi 287ppi
It’s difficult to get an accurate idea of what the artwork will
look like on the device just from looking at your computer.
7
8. Does it have a resistive touch screen?
This part makes me sound really smart.
8
9. Or does it have a capacitive touch screen?
And what about multi-touch?
9
10. Know your gestures.
Tap Double tap Drag Flick Pinch (multi-touch)
How precise are they on the device you have to design for?
10
11. Hardest to reach areas.
Left-handed users are screwed. Sorry.
11
Elaine Chen, art director at Sapient’s interactive studio in Toronto.
Been there for nearly 3 years.
Before then I worked at the Ontario Science Centre as their web designer.
Until recently background has been mostly web except for a bit of mobile I did a year ago.
Which is how I ended up getting sent to a Sapient office in the States to work on the UI for a new mobile touchphone.
I worked with IAs from both Sapient and the client side.
Unfortunately the work we did is NDA, so this presentation is a high-level look at what to keep in mind when you design for a mobile touchphone.
I don't actually have quantitative evidence of this, but I was blown away by how much experience a couple of the American Sapient IAs had in mobile design.
Phones in Canada don’t ship with Flash Lite, or QR code-reading software.
Frustrating when you’re a designer in experience marketing because you see all these interesting campaigns around mobile web, but you never get to work on one.
The first thing you need to know when you design for mobile is the form factor.
Is it a candy bar? Is it a flip? Does it have a slider?
If it has a slider, is it a numeric keypad or a qwerty keyboard?
Does anything happen to the screen when you flip the phone 90 degrees?
If so, will your app need to be in both portrait and landscape mode?
And what happens if there's a slider?
This means you have to think through the UX of up to 3 versions of the same screen.
All phones have hardkeys for power and volume, but otherwise it varies.
You need to know because it affects the navigation you put in your UI.
If there's a hardkey Back button, or a dedicated Home button like the iPhone, you don't need to put a Back button in your screen interface unless you've drilled down a few levels.
PPI = pixels per inch - refers to pixel density or resolution
These screens are accurate in terms of pixel dimensions, but not physical dimensions.
HTC screen is very high resolution so it shows up very large on a computer screen - but it's physcially the smallest screen of the lot.
The device I worked on was extremely high res. I ended up printing out my designs to get a better idea of what the screen would look and feel like.
There are two main types of mobile touchscreen technology: resistive and capacitive.
Resistive screens use pressure, so they can be used with a stylus and in theory, with gloves on .
This technology is common in Asia where gesture recognition needs to be precise.
Resistive screens are also cheaper than capacitive screens.
Capacitive screens use a surface material that stores a slight electrical charge.
Because our bodies conduct electricity, we change that charge at the point of contact when we touch the screen with our finger.
That's why you can't use a stylus with your iPhone (unless it's a special stylus that's been designed for that purpose).
The iPhone, btw, has a grid of sensors which is why it's so sensitive and multi-touch works really well.
Multi-touch - only possible on capacitive screens. (I believe Apple has it patented up the wazoo.)
Good to know how it works on the device you're designing for. When you touch two spots at once, how is it interpreted? Do both spots register or does the phone just calculate the equidistant point between them?
It's important to know which gestures are at your disposal, and how precise they are.
Hardest to reach areas for one-handed use - and if you're in the right-handed majority - is the top left corner, and the bottom left corner.
Which is kind of interesting because our instinct as North Americans who read top to bottom, left to right is to move the most used apps to the top of the screen.
This makes establishing standard places for buttons difficult if an application switches from portrait to landscape, because in landscape, you're holding the phone in both hands and all of a sudden the rules change.
Designing for mobile is a paradigm shift.
5-way - refers to navigation on non-touch cell phones - up down left right and enter.
Metaphors change. On this project I would get wireframes with scrollbars in them. On a touch screen you don't need a dedicated area for scrolling, you can just grab the whole screen.
Layout conventions change. Unlike web, main menus tend to sit at the bottom rather than the top because it's easier to reach with one hand.
Visual target should be at least 5mm.
Actual touch area should be at least 7-10mm.
Touch areas should be separated by at least 1mm.
Users have better precision horizontally than vertically, so it helps to put extra space between rows of touch targets.
Buttons need to be large so that they can hit precisely.
And of course, whenever you have a touchscreen, whether it's a kiosk or a phone, buttons need to look like 3-dimenstional buttons.
Buttons, whether on a touchscreen or the web, need feedback to let the user know that it's been successfully pressed.
I believe the Samsung Instinct has haptics so you do get physcial feedback when you press a button, but otherwise you need an auditory and/or visual cue.
However, that visual cue that you've pressed an active area can't just be a colour change, like a rollover on the web.
Because your fingertip covers up the target area, feedback has to visible outside of it.
Glows seem to be popular for icons and small buttons, and signpost popups seem to get used for qwerty keyboards or monthly calendar views, any interface with smaller than normal touch areas crammed together.
When you're coming up with a colour scheme for a UI, this is something to think about:
A dark palette will use less battery power because the screen doesn't need to illuminate as brightly.
In RGB colour, black is actually the absence of light (and you can see that by the way this slide is being projected).
When it comes to colour palette and colour contrast, you also have to consider environmental factors as well as normal rules of contrast and readability.
Touchscreens that use resistive technology have poorer visibility in sunlight because of light gets reflected between all the layers in the surface.
Similarly you may want to know what kind of finish the phone you're designing for has.
Lighting conditions can be simulated in Adobe Device Central, which ships with CS4. They have a stock library of existing device models. I've no idea if the iPhone or any of the new touchphones are included.
Transparency can affect a device's processing power, because the value of each pixel that's either transparent or semi-transparent needs to be calculated.
So if the PPI is very high, this means there are a lot of pixels that have to be accounted for if you have close-cropped icons, or rounded corners, or drop shadows and glows.
That was my biggest headache last fall. Client-side design department wanted a soft, fuzzy, layered aesthetic, but the software engineers said no, there had to be more square corners and hard edges and flat colours.
So that brings me to...
...the biggest lesson I learned about designing a mobile touchphone UI:
Designers want to create the best user experience. Teams of software engineers who are concerned about performance and want their application to get the attention it needs. We sat in a lot of meetings with them since they knew what was technically possible and what wasn't.
Carrier - equivalent in Canada would be Telus or Rogers - who want the product to meet their business requirements and their branding requirements. They have a lot of power, which we learned the hard way.