This document discusses UI design principles and patterns for mobile web apps using HTML5. It covers topics like direct manipulation, ergonomics, consistency with platform conventions, and providing immediate feedback. It also summarizes common mobile UI elements like buttons, tab bars, drill downs, and segmented controls/tabs and how they should be implemented consistently across iOS and Android based on established platform conventions. Code snippets and developer tips are provided for implementing these patterns using HTML5 and CSS. Alternatives from popular apps are shown as examples.
The First Ciklum DP Android Practice Leaders Community Meet-Up.
By Ilya Lisovoy, Android developer with 2+ years of experience, who loves amazing apps with innovations and best UX practices.
Mobile prototypes for Android and iOS,- the difference between them, and why is it bad to make universal design for all platforms; adapting the design of one mobile platform to another; simple tips for designers from developers.
Great User Interface design is composed of part data (User Research and User Testing), and part intuition. This talk highlights the various Intuition Factors in the User Experience Design process.
This is the way I like to present my web traffic reports.
Please if you have any doubt of comment share it with me, it will help to improve my work.
Thank you very much!!
E
PS: It looks better if you download it ;)
The First Ciklum DP Android Practice Leaders Community Meet-Up.
By Ilya Lisovoy, Android developer with 2+ years of experience, who loves amazing apps with innovations and best UX practices.
Mobile prototypes for Android and iOS,- the difference between them, and why is it bad to make universal design for all platforms; adapting the design of one mobile platform to another; simple tips for designers from developers.
Great User Interface design is composed of part data (User Research and User Testing), and part intuition. This talk highlights the various Intuition Factors in the User Experience Design process.
This is the way I like to present my web traffic reports.
Please if you have any doubt of comment share it with me, it will help to improve my work.
Thank you very much!!
E
PS: It looks better if you download it ;)
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...Gerke Max Preussner
Overview of the Unreal Motion Graphics (UMG) framework in Unreal Engine 4. Presented at West Coast Unreal Engine DevCon 2014 in San Francisco and Seattle.
Contrary to popular belief, it is indeed possible to create great-looking UIs for apps that target very low-priced phones. This presentation shows you how to apply solid UX guidelines and application-design principles that work great even on very low-cost hardware. Juhani Haaparanta, principal interaction designer with Nokia in Tampere, Finland, explains how to design the right type of interaction architecture, apply the appropriate UI style, and add a twist of visual excellence to applications for budget phones. The resulting apps will deliver better user experience and thus better reviews, usage numbers, and return on investment.
First of a series of workshops, aimed to give business managers and engineers an exposure to design concepts. This presentation covers User Experience Concepts, Graphic Design Fundamentals, UI Trends, Cool tools people can use, and an overview of iOS/Android technical specs for UI.
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutDavid Farrell
Lecture 12 in the Caledonian University class COMU346. This lecture covers general usability guidelines, use of metaphors in game interfaces and grids, including the rule of thirds and use of the Golden Ratio / Phi
Unreal Engine Basics 05 - User InterfaceNick Pruehs
Fifth chapter of the lecture Unreal Engine Basics taught at SAE Institute Hamburg.
- Understanding the difference between Unreal’s UI frameworks Slate and UMG
- Learning how to create basic and complex user interfaces in UMG
- Learning how to build a simple main menu
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/
West Coast DevCon 2014: The Slate UI Framework (Part 2) - Game UI & Unreal Mo...Gerke Max Preussner
Overview of the Unreal Motion Graphics (UMG) framework in Unreal Engine 4. Presented at West Coast Unreal Engine DevCon 2014 in San Francisco and Seattle.
Contrary to popular belief, it is indeed possible to create great-looking UIs for apps that target very low-priced phones. This presentation shows you how to apply solid UX guidelines and application-design principles that work great even on very low-cost hardware. Juhani Haaparanta, principal interaction designer with Nokia in Tampere, Finland, explains how to design the right type of interaction architecture, apply the appropriate UI style, and add a twist of visual excellence to applications for budget phones. The resulting apps will deliver better user experience and thus better reviews, usage numbers, and return on investment.
First of a series of workshops, aimed to give business managers and engineers an exposure to design concepts. This presentation covers User Experience Concepts, Graphic Design Fundamentals, UI Trends, Cool tools people can use, and an overview of iOS/Android technical specs for UI.
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutDavid Farrell
Lecture 12 in the Caledonian University class COMU346. This lecture covers general usability guidelines, use of metaphors in game interfaces and grids, including the rule of thirds and use of the Golden Ratio / Phi
Unreal Engine Basics 05 - User InterfaceNick Pruehs
Fifth chapter of the lecture Unreal Engine Basics taught at SAE Institute Hamburg.
- Understanding the difference between Unreal’s UI frameworks Slate and UMG
- Learning how to create basic and complex user interfaces in UMG
- Learning how to build a simple main menu
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/
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
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.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
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.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
15. Designer says:
Position on screen
iOS Android
------------------------------------
UI principles:
• Be consistent with
platform conventions
• Immediate feedback
16. Designer says:
Visual appearance (frames on iOSvs. no frame on
Android, use system fonts)
iOS Android
------------------------------------
UI principles:
• Be consistent with
platform conventions
• Ergonomics
• Immediate feedback
17. Designer says:
Back / Cancel actions on iOSuse a button vs. the
hardware Back button on Android.
iOS Android
------------------------------------
UI principles:
• Be consistent with
platform conventions
• I should always know
where I am
• Immediate feedback
18. Designer tip: how to create an iOS looking button
Challenge: have a single button image background
across all app themes
Button background image:
• Button height: 60px (30px actual) -> image is double size
for high retina display
• Shape: rounded rectangle, 12px round corner (6px
actual)
• Drop shadow: white @45% opacity; Angle: 90; Blend
mode: normal; Distance: 2; Spread: 0; Size: 0
• Inner shadow: black @65% opacity; Angle: 90; Blend
mode: Normal; Distance: 3; Choke: 0; Size: 1
• Stroke: 1 px, black @65% opacity
• Gradient overlay: 30% opacity white to full transparency;
linear gradient; Angle: 90
Button font:
• Helvetica bold white, 11pt.
• Drop shadow: black @65% opacity; angle -90; distance 1;
spread 0; size 1
22. Developer says_
Touch targets
Handle them case-by-case
with CSS
23. Developer says_
Cross-platform visual
conventions
Help yourself with some Javascript, and handle visual
differences in CSS.
24. Alternatives
Direct manipulation of content is usually better
Camera Flipboard Clear
Zoom In / Out with Pinch & Flip Pages with a swipe No Buttons. All actions are
spread gestures gesture done with gestures
25. Tab bars
[ used to navigate through
the sections of your app]
26. Designer says:
Position on screen
iOS Android
---------------------------
UI principles:
• Be consistent
with platform
conventions
• I should always
know where I
am
• Show me what I
need when I
need it
27. Designer says:
Bar height.50px on iOS, 48px on Android
iOS Android
50px
48px
------------------------------
UI principles:
• Ergonomics
28. Designer says:
#of tabs in view: 5on iOS, 3 words on Android
iOS Android
---------------------------------
-
UI principles:
• I should always know
where I am
• Show me what I
need when I need it
34. Cross platform solution with CSS
Twitter
App UI implementation
on iOS and Android
Identifying common
elements and
positioning them in
consistency with
platform.
35. Cross platform solution with CSS
Yapp
UI implementation on
iOS and Android.
Identifying common
elements and
positioning them in
consistency with
platform.
36. Alternatives
Main Menu page: Facebook Pinterest:
Creates more drill downs Side menu. Still requires an Tab bar disappears when
I always need to go back in extra tap to go back to scrolling down and appears
order to navigate menu. I know where I was. when scrolling up
39. Designer says:
Show user’s path and current location (title bar
and Back button)
iOS Android
----------------------------
UI principles:
• I should always
know where I am
• Immediate
feedback
40. Designer says:
#of drill downs (more than 2-3 feels like too much
drilling especially if you don’t use a tab bar to
navigate)
---------------------------
UI principles:
• I should always
know where I
am
• Show me what I
need when I
need it
46. Segmented controls
/ tabs & spinners
[ used to show different vies
of the same content]
47. Designer says:
Use segmented controls to avoid a level of
drill downs
-------------------------------
UI principles:
• I should always know
where I am
• Immediate feedback
49. Designer says:
iOS: use on app’s main
sections where back
button is not needed
Highlight current
segment (no title bar)
-------------------------------
UI principles:
• I should always know
where I am
• Immediate feedback
50. Developer says_
Tab bar tips apply.
Use a scrolling library with snap-to for
horizontal scrolling on Android.
61. Designer says:
Scrollbars appear only
when you need them
-----------------------------------
UI principles:
• Show me what I want
to see when I need it
62. Designer says:
Make sure scrollbar is visible on any
background. (ios uses a semi transparent
black scrollbar with a white outline)
-----------------------------------
UI principles:
• Immediate feedback
63. Designer says:
Overshoot animation (ios) vs.
overscrollcolor (android). Overshoot on ios
created a new UI layer for actions and
messages that occur below the Zero line
-----------------------------------
UI principles:
• Show me what I want
to see when I need it
• Discoverability
64. Overshoot:below the ZERO line
Pull to refresh Yapp
Gesture action discovered Promo message
at overshoot
68. Designer says:
• Auto-populate text field and auto-complete
• Use text field Clear button
-------------------------------
UI principles:
• Don’t make me type
69. Developer says_
No browser events for
keyboard hiding/showing.
76. Resources
Apple Human Interface Guidelines:
https://developer.apple.com/library/ios/#documentation/UserExperience/Conce
ptual/MobileHIG/Introduction/Introduction.html
Android Interface Guidelines:
http://developer.android.com/design/index.html
Luke Wroblewski
Blog: http://www.lukew.com/ff
Book: Mobile First: http://www.lukew.com/resources/mobile_first.asp
Touch Gesture Reference Guide: http://www.lukew.com/ff/entry.asp?1071
Quirksmode
http://caniuse.com/
Coachmarks:
http://pttrns.com/coachmarks
Editor's Notes
Introduce Yael and Luke. Designer? Developer? Introduce Yapp.Quick talk overview.
There are many more but we chose the ones we think are most important to UX on Mobile
Ppl interact directlywith the screen. The use of gestures help ppl understand the results of their actions. Tap, drag, flick, pinch, spread are example to gestures users perform when touching the screen.
Ppl expect immediate feedback when they operate a control.tap color or a subtle animation for a gesture provides them a meaningful feedback.
Consistency means that ppl can transfer their knowledge and skills from one app to another. They also know what to expect when they operate a control.
Give ppl confidence that they know the way around your app.
Ppl get overwhelmed when they see too much at once. Focus on the primary task you need users to perform in your app and design your information accordingly.
Device keyboard is small. Make ppl type as less as possible.
Buttons are positions on side of the title bar (ios), and on the action bar (android). Always keep the left position of the Back button on ios for consistent behavior across apps.
Frames ios vs. no frames (android). The use of icons and words. Look & feel of a physical button (ios) vs. flat design on Android.
ios: you know where you came from. The button indicates your pathandroid: no need for a Cancel button, you simply go back to previous screen.
We could not get the same level of accuracy with CSS and performance was slower.
A library to help with this:https://github.com/cheeaun/tappable from Lim CheeAun in Singapore.
Highlight on touchstart for feedback. It’s more complicated than this, though. You need to make sure the touchend was on the same button the touchstart was on, and/or that the user didn’t move her finger in a way indicative of a scrolling. And you may need to account for a long-hold differently.
Test for touch support and decide whether to listen for touch events or mouse events, or try the new feature in Chrome Canary dev channel
I’ve dreamed about what a Javascript library to do this automatically might look like.
Consider the # of sections in your app.Ios: more buttonAndroid: scrollable tabs / icon bar that can fit more tabs
Not to confuse actions and navigation.
You get vectors, which means you get sharp results on any pixel density and can scale using font-size for cross-platform differences like 44px vs 48px
You get vectors, which means you get sharp results on any pixel density and can scale using font-size for cross-platform differences like 44px vs 48px
Send the action after a brief delay to allow the browser a cycle to renderthe UX feedback resulting from the isActive property change. In testing inMobile Safari on an iPhone 4, a delay of less 10ms resulted in the highlight statenot being rendered.
Tab bar is moved to the top of the page on Android. No back button on Android
Main menu page: more drill downs, not know where you areFacebook: still an extra step but I see where I was before. Swipe gesture is more intuitive.Pinterest: reveal and hide tab bar based on user’s task.
On Android there is no indication where you are because of the hardware back button.
Slide animation
Note that the highlight state stays onImage from Lim CheeAunSencha Touch Navigation View
Android are using the tabs system and spinners to show different views of the content
iScroll with snap option: http://cubiq.org/iscrollZyngascroller with snapping option: https://github.com/zynga/scrollerMore on scrolling in the next section.
Moneybook
Camera+
Apple Find My Friends
The Early Edition
iPad virtual keyboard. Note the “bumps” on the F & J keys.
A good library will use the Hardware Accelleration techniques we talked about earlier.You will need to keep it informed when the height of your content changes. iScroll#refresh, scroller#setDimensionsEither library can implemented the overshoot content that Yael showed, but Zyngascroller has a pull-to-refresh implementation you can plug into.iScroll: http://cubiq.org/iscrollZyngascroller: https://github.com/zynga/scroller
Things related to text input are a tough spot for mobile web apps.
Things related to text input are a tough spot for mobile web apps.
Both try to scroll and zoom
To Yael’s specific recommendations:
Autocomplete is trickier. These attributes suppress default behavior on iOS, but Android’s can’t be suppressed.