Designing For Offline

•

0 likes•221 views

Devices are orbiting internet connectivity at all times, like cars passing under the glow of street lamps, only without their own light to follow. Our practice in designing modern web applications is burdened by a past that assumed the browser was for reading one document at a time on a steadily connected device.   In this talk, Steve will introduce the audience to the challenges of creating offline experiences, share offline design patterns found in the wild, describe process we may use to discover the unique cases of our own offline experiences, and shed some light on the state of worldwide device connectivity.

Software

Designing for
Oﬄine Experiences
Designing for Oﬄine Experiences @strevat

I’m Steven Trevathan.
Head of Design at Mariana
@strevat

Designing for Oﬄine Experiences @strevat
Context

Designing for Oﬄine Experiences @strevat
Traveling with limited connection

Designing for Oﬄine Experiences @strevat
You may have low battery

Designing for Oﬄine Experiences @strevat
Prepaid plan

Designing for Oﬄine Experiences @strevat
Orbiters

Designing for Oﬄine Experiences @strevat
Commuting to work

Designing for Oﬄine Experiences @strevat
Vacationing with family

Designing for Oﬄine Experiences @strevat
Trying to process a payment

Designing for Oﬄine Experiences @strevat
Product

Designing for Oﬄine Experiences @strevat
Oﬄine First.
http://alistapart.com/article/oﬄine-ﬁrst
&
oﬄineﬁrst.org

Designing for Oﬄine Experiences @strevat
Borrows from Mobile First &
Responsive Design methodologies

Designing for Oﬄine Experiences @strevat
- design for the most challenging and
constrained environments

Designing for Oﬄine Experiences @strevat
- progressively enhance the experience
for fully connected environments

Designing for Oﬄine Experiences @strevat
1) Oﬄine experiences improve
speed and enjoyment in high-
connectivity centers

Designing for Oﬄine Experiences @strevat
2) Oﬄine experiences are
accessible and dependable in
low-to-no connectivity centers

Designing for Oﬄine Experiences @strevat
3) Oﬄine experiences improve average
user experiences by simply being a
universally dependable product.

Designing for Oﬄine Experiences @strevat
Dependability

Designing for Oﬄine Experiences @strevat
It can’t be an after thought

Designing for Oﬄine Experiences @strevat
oﬄinestat.es

Designing for Oﬄine Experiences @strevat
What works?

Designing for Oﬄine Experiences @strevat
Focus on your core interaction.

Designing for Oﬄine Experiences @strevat
Respond Optimistically?
~tread lightly~

Designing for Oﬄine Experiences @strevat
Placeholder/Skeleton UI
~the shape of content to come~

Designing for Oﬄine Experiences @strevat
Take it seriously.

Designing for Oﬄine Experiences @strevat
Your product will work.

Designing for Oﬄine Experiences @strevat
Your customers are happy because
their product works.

Designing for Oﬄine Experiences @strevat
A better UX will come with it, giving
the product contour and making it
more forgivable by better setting
expectations with users.

Designing for Oﬄine Experiences @strevat
Process

Designing for Oﬄine Experiences @strevat
You will still design your
experiences centered around your
core interactions and core value

Designing for Oﬄine Experiences @strevat
Your process isn’t changing,
save for one leading question.

Designing for Oﬄine Experiences @strevat
How should our core product
value be experienced oﬄine?

Designing for Oﬄine Experiences @strevat
Like Mobile First & Responsive
Design, you make it part of your
contextual design process

Designing for Oﬄine Experiences @strevat
- reliable

Designing for Oﬄine Experiences @strevat
- consistent

Designing for Oﬄine Experiences @strevat
- fast

Designing for Oﬄine Experiences @strevat
- higher valued

Designing for Oﬄine Experiences @strevat
Community

Designing for Oﬄine Experiences @strevat
Quarterly Oﬄine UXDC Collaboratives

Designing for Oﬄine Experiences @strevat
Slack
oﬄineﬁrst.org/chat
Oﬄine Newsletter
oﬄineﬁrst.org/news
Medium
medium.com/oﬄine-camp

Art by Bruce Riley
https://www.ﬂickr.com/photos/17036157@N03/sets

Viewers also liked

Offline first: application data and synchronization

EatDog

Sync is hard: building offline-first Android apps from the ground up

droidcon Dubai

Data synchronization and offline capabilities are key to creating successful mobile applications and there are many factors to consider. – What data format should you use? – How do you manage security? – How do you efficiently manage syncing data to hundreds of applications independently? In this session, you’ll learn about various factors that drive answers to these questions. You’ll also learn from live code and interactive demonstrations how to use SSL and OAUTH2 to securely synchronize JSON data with a remote REST service and how to use synchronization tokens to efficiently keep your clients up to date. There will be client examples included for both the iOS and Android platforms, but you’ll be able to apply these concepts to any client, regardless of your platform.

Data Synchronization Patterns in Mobile Application Design

Eric Maxwell

Nacionalismo, guerrilhas e terrorismo

Adriana Gomes Messias

Divisão territorial brasileira

Abner de Paula

Formação Territorial Do Brasil

Luciano Pessanha

GEOGRAFIA as principais formas de regionalizar o Brasil

Dayane Cristine Leite

A regionalização e as divisões regionais no brasil

Professor

Viewers also liked (8)

Offline first: application data and synchronization

Sync is hard: building offline-first Android apps from the ground up

Data Synchronization Patterns in Mobile Application Design

Nacionalismo, guerrilhas e terrorismo

Divisão territorial brasileira

Formação Territorial Do Brasil

GEOGRAFIA as principais formas de regionalizar o Brasil

A regionalização e as divisões regionais no brasil

Similar to Designing For Offline

What would happen if we would bring design, front end, back end etc. all together? How could we improve the user-flows by thinking of alternative, non-happy flows? What would happen to the performance and therefore the user-experience when back end is already involved before the finalised wireframes are handed over?! That's all nice and dandy. But we do need to deal with some concerns like: - Knowledge gap: How can the different disciplines with their specialty understand each other and come to conclusions? - Shared responsibilities: Where do start and where do they end? - Efficiency: What would it do to the efficiency of the team when they get different tasks? In this talk we’ll try to address and hopefully take away those concerns and focus on the benefits it will bring, working in a hybride team.

Co-creating with UX and Software Rabobank

SimonedeGijt

Co-creating_UX_Software-DevoxxUK.pdf

SimonedeGijt

What would happen if we would bring design, front end, back end etc. all together? How could we improve the user-flows by thinking of alternative, non-happy flows? What would happen to the performance and therefore the user-experience when back end is already involved before the finalised wireframes are handed over?! That's all nice and dandy. But we do need to deal with some concerns like: - Knowledge gap: How can the different disciplines with their specialty understand each other and come to conclusions? - Shared responsibilities: Where do start and where do they end? - Efficiency: What would it do to the efficiency of the team when they get different tasks? In this session we’ll dive in together; - seeing what the pro's and con's are of a multidisciplinaire way of working, - what tips and tricks can be exchanged, - and what kind of tools can help in smoothing out the concerns that arise

Co-creating_UX_Software_JFALL.pdf

SimonedeGijt

User experience design process

Mike McCoy

UX Plateau of Tolerance

David Edwin Meyers

4ds

vurimi prasad

The User Experience Designer

Manish G Pillewar

UX Camp 2017 – How UX survives in agile development

Janne_Bjorsted

What would happen if we would bring design, front end, back end etc. all together? How could we improve the user-flows by thinking of alternative, non-happy flows? What would happen to the performance and therefore the user-experience when back end is already involved before the finalised wireframes are handed over?! That's all nice and dandy. But we do need to deal with some concerns like: - Knowledge gap: How can the different disciplines with their specialty understand each other and come to conclusions? - Shared responsibilities: Where do start and where do they end? - Efficiency: What would it do to the efficiency of the team when they get different tasks? In this session we’ll dive in together; - seeing what the pro's and con's are of a multidisciplinaire way of working, - what tips and tricks can be exchanged, - and what kind of tools can help in smoothing out the concerns that arise

Co-creating_UX_Software_DevoxxBE.pdf

SimonedeGijt

Customer-centered Design Organizations (Peter Merholz at Enterprise UX 2017)

Rosenfeld Media

This workshop will prepare anthropologists to work in the tech industry in roles such as UX, product management, data science, and software engineering. Topics covered will include a discussion on the tech landscape, the need to reframe our academic experience in business terms, tips for designing a resume and portfolio, and a discussion on some additional training that anthropologists may wish to seek before applying to a tech job. Following the presentation, the group will break into smaller sessions where facilitators will help participants reframe their individual research experiences for a tech resume.

Breaking Into Tech: An Anthropology Career Workshop

Matt Artz

User experience design isn’t just moving pixels; it’s much bigger than solely the user interface (UI). You should start considering the entire customer experience: the full life-cycle of your customer’s experience across every channel, digital and non-digital. Evaluate every touch point, and redesign each one as necessary to meet your customer’s needs. The theme of this talk is how to define User Experience (UX) for digital products Key takeaways • Applying Design Thinking to UX • From touch points to end-to-end experiences • User research and Analytics to identify Personas and pain points • Journey mapping • Wireframing from lo-fi to hi-fi • Usability and A/B testing

Designing user experience (ux) for digital products

Vijay Morampudi

Sage Research & Design Introduction

texasanna

Creating great websites and applications is hard work. There are so many aspects to juggle; so much complexity to control. You have to understand the needs of your users, get buy-in from stakeholders, organize lots of content and create an intuitive interface. This is no small order. Fortunately, nForm has created a simple resource to pass on a little of what we’ve learned about planning for great design. Our User Experience Cards feature tried-and-true methods for designing better interactive products of all kinds--from online stores to corporate intranets to mobile apps. Learn about why these methods are needed, how they can help you achieve success, and how you can use the User Experience Cards to plan your own projects.

Designing Better Applications, Website and Intranets

Dennis Breen

Designing Better Applications, Websites and Intranets

nForm User Experience

3 Ways to Go Mobile First with Responsive Design

ZURB

UX Deliverables in Practice

Peter Boersma

Balancing Product and UX Design by Babylist Sr Product Designer

Product School

CTS - Experience letter

Saravanaselvan Senguttuvan

Ofspace-Class-Outline-1.pdf

FahimFaisalApurbo

Similar to Designing For Offline (20)

Co-creating with UX and Software Rabobank

Co-creating_UX_Software-DevoxxUK.pdf

Co-creating_UX_Software_JFALL.pdf

User experience design process

UX Plateau of Tolerance

4ds

The User Experience Designer

UX Camp 2017 – How UX survives in agile development

Co-creating_UX_Software_DevoxxBE.pdf

Customer-centered Design Organizations (Peter Merholz at Enterprise UX 2017)

Breaking Into Tech: An Anthropology Career Workshop

Designing user experience (ux) for digital products

Sage Research & Design Introduction

Designing Better Applications, Website and Intranets

Designing Better Applications, Websites and Intranets

3 Ways to Go Mobile First with Responsive Design

UX Deliverables in Practice

Balancing Product and UX Design by Babylist Sr Product Designer

CTS - Experience letter

Ofspace-Class-Outline-1.pdf

Recently uploaded

Looking for an efficient way to manage your finances? Look no further than our money management app. With easy-to-use features, you can track your expenses, create budgets, and monitor your savings goals all in one place. Our app provides real-time updates on your spending habits and helps you make smarter financial decisions. Take control of your finances today with our user-friendly money management app.

Right Money Management App For Your Financial Goals

Jhone kinadey

Test automation is a cornerstone of software development and quality assurance in today's rapidly evolving digital landscape. Its significance cannot be overstated. Businesses can enhance efficiency, productivity, and accelerate software delivery to market through automation, streamlining testing processes effectively. This comprehensive guide addresses the best practices for test automation in 2024. It offers a detailed checklist to empower you to optimize your automation efforts and maintain a competitive edge.

The Ultimate Test Automation Guide_ Best Practices and Tips.pdf

kalichargn70th171

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf

kalichargn70th171

(Vivek)Call Us, 8448380779,Call girls in Delhi NCr – We Offer best in class call girls. escort Service At Affordable Price At low Rate with Space Night 8000 We Are One Of The Oldest Escort and Call girls Agencies in Delhi. You Will Find That Our Female Escorts Are Full Of Fun, Sexy And They Would Love Enjoy Your Company. We Have A Fantastic Selection Of Escort Ladies Available For In-Calls As Well As Out-Calls. Our Escorts Are Not Only Beautiful But All Have Great Personalities Making Them The Perfect Companion For Any Occasion. In-Call:- You Can Come At Our Place in Delhi Our place Which Is Very Clean Hygienic 100% safe Accommodation. Out-Call:- You have To Come Pick The Girl From My Place We Are Also Provide Door Step Services (Delhi Ncr, Noida, Gurgaon, Faridabad, Ghaziabad Note:- Pic Collectors Time Passers Bargainers Stay Away As We Respect The Value For Your Money Time And Expect The Same From You Hygienic:- Full Ac room And Clean Rooms Available In Hotel 24 * 7 Hourly In Delhi NCR More Details, With WhatsApp Number, +91-8448380779

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️

Delhi Call girls

%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain

masabamasaba

InShot proinshot.com stands tall among its peers as the ultimate video editing app, offering simplicity, versatility, and power in one package. With its intuitive interface and comprehensive feature set, InShot caters to both beginners and seasoned editors alike. Whether you're creating content for social media, YouTube, or personal projects, InShot empowers you to unleash your creativity and transform your videos into captivating masterpieces. Join the millions of users who trust InShot https://www.proinshot.com/ for all their video editing needs and discover the difference for yourself!

Exploring the Best Video Editing App.pdf

proinshot.com

Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts In Chinsurah ❤Personal Whatsapp Number Chinsurah Call Girls 8617697112 💦✅. Chinsurah escorts we are avaliable for our all types budget customers with offer great deals in Chinsurah.Call Now our Chinsurah escort service & call girls ... Independent call girls in Chinsurah escorts available 24 hours a day for discreet incall and outcall bookings from trusted call girls - Elis.in. Nitya salvi Chinsurah escorts service agency # Are you looking for sexy call girls ? Call our agency to get you dream independent call girl, ... One shot: ₹2000/in-call, ₹5000/out-call Two shots with one girl: ₹3500/in-call, ₹6000/out-call Body to body massage with sex: ₹3000/in-call Full night for one person: ₹7000/in-call, ₹10000/out-call Flexibility Choices and options Lists of many beauty fantasies Turn your dream into reality Perfect companionship Cheap and convenient In-call and Out-call services And many more. WhatsApp Chat: 📞 8617697112 Visit The Website : https://www.nityasalvi.com/

Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...

Nitya salvi

Azure Native Qumulo scales elastically for common High Performance Compute (HPC) workloads based on application requirements for: Financial Services, Automotive, Genomics / Life Sciences, Media and Entertainment, Energy, Oil and Gas, etc. Performance can be dialed UP (and back down) much higher than the examples shown here. These slides offer a glimpse into ANQ's HPC capabilities, although at a smaller scale. We invite YOU to do your own testing (with a free ANQ trial) and work with us to test your HPC workloads in Azure.

Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf

ryanfarris8

Pharm-D Biostatistics and Research methodology

Anusha Are

Unlocking the Future of AI Agents with Large Language Models

aagamshah0812

In an era where security concerns are paramount, the integration of artificial intelligence (AI) into CCTV cameras has revolutionized surveillance capabilities. One of the most significant advancements is the ability to achieve real-time threat detection, enabling immediate responses to potential security breaches. This blog explores how AI is reshaping surveillance through real-time threat detection and the implications of this technology.

Optimizing AI for immediate response in Smart CCTV

shikhaohhpro

Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...

SelfMade bd

%in tembisa+277-882-255-28 abortion pills for sale in tembisa

masabamasaba

%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein

masabamasaba

Define the academic and professional writing..pdf

PearlKirahMaeRagusta1

In today's dynamic e-commerce landscape, the payment gateway emerges as a linchpin, ensuring smooth and secure transactions between buyers and sellers. In this discourse, we delve into the meticulous process of devising test cases tailored for scrutinizing payment gateways. Crafting precise test cases for payment gateways is a quintessential responsibility for testers operating within the service industry. This article meticulously explores pivotal scenarios integral to how to test payment gateways, coupled with essential guidelines for drafting effective test cases.

Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf

kalichargn70th171

Craft an AI & Machine Learning Pitch with our Editable Professional PowerPoint Template. Ignite your AI & Machine Learning pitch with our cutting-edge PowerPoint template tailored for the industry. Perfect for AI conferences, investor presentations, sales pitches to tech-focused companies, training sessions, and educational programs. - 20+ editable slides: Get a variety of options to choose from for your presentation. - Time-saving solution: Download, replace text/images with a few clicks. - User-friendly customization: Easy to use and personalize. - Modern and attractive design: Captivating visuals, sleek layout. - Tailored to your requirements: Fully alterable for customization. - Well-organized slides: Complete control over content. - Thematic specificity: Reflects healthcare industry with relevant graphics. - Showcase your business idea: Communicate value proposition effectively.

AI & Machine Learning Presentation Template

Presentation.STUDIO

Data spaces in distributed environments should be allowed to evolve in agile ways providing data space owners with large flexibility about which data they store. Agility and heterogeneity, however, jeopardize data exchanges because representations may build on varying ontologies and data consumers may not rely on the semantic correctness of their queries in the context of semantically heterogeneous, evolving data spaces. Graph data spaces are one example of a powerful model for representing and querying data whose semantics may change over time. To assert and enforce conditions on individual graph data spaces, shape languages (e.g SHACL) have been developed. We investigate the question of how querying and programming can be guarded by reasoning over SHACL constraints in a distributed setting and we sketch a picture of how a future landscape based on semantically heterogeneous data spaces might look like.

Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...

Steffen Staab

Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid

Philip Schwarz

%in Midrand+277-882-255-28 abortion pills for sale in midrand

masabamasaba

Recently uploaded (20)

Right Money Management App For Your Financial Goals

The Ultimate Test Automation Guide_ Best Practices and Tips.pdf

Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf

call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️

%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain

Exploring the Best Video Editing App.pdf

Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...

Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf

Pharm-D Biostatistics and Research methodology

Unlocking the Future of AI Agents with Large Language Models

Optimizing AI for immediate response in Smart CCTV

Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...

%in tembisa+277-882-255-28 abortion pills for sale in tembisa

%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein

Define the academic and professional writing..pdf

Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf

AI & Machine Learning Presentation Template

Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...

Direct Style Effect Systems -The Print[A] Example- A Comprehension Aid

%in Midrand+277-882-255-28 abortion pills for sale in midrand

Designing For Offline

1. Designing for Oﬄine Experiences Designing for Oﬄine Experiences @strevat

6. I’m Steven Trevathan. Head of Design at Mariana @strevat

7. Designing for Oﬄine Experiences @strevat Context

8. Designing for Oﬄine Experiences @strevat Traveling with limited connection

9. Designing for Oﬄine Experiences @strevat You may have low battery

10. Designing for Oﬄine Experiences @strevat Prepaid plan

11. Designing for Oﬄine Experiences @strevat Orbiters

12. Designing for Oﬄine Experiences @strevat Commuting to work

13. Designing for Oﬄine Experiences @strevat Vacationing with family

14. Designing for Oﬄine Experiences @strevat Trying to process a payment

15.

16. Designing for Oﬄine Experiences @strevat Product

17. Designing for Offline Experiences @strevat Offline First. http://alistapart.com/article/offline-first & offlinefirst.org

18. Designing for Oﬄine Experiences @strevat Borrows from Mobile First & Responsive Design methodologies

19. Designing for Oﬄine Experiences @strevat - design for the most challenging and constrained environments

20. Designing for Oﬄine Experiences @strevat - progressively enhance the experience for fully connected environments

21. Designing for Oﬄine Experiences @strevat 1) Oﬄine experiences improve speed and enjoyment in high- connectivity centers

22. Designing for Oﬄine Experiences @strevat 2) Oﬄine experiences are accessible and dependable in low-to-no connectivity centers

23. Designing for Oﬄine Experiences @strevat 3) Oﬄine experiences improve average user experiences by simply being a universally dependable product.

24. Designing for Oﬄine Experiences @strevat Dependability

25. Designing for Oﬄine Experiences @strevat It can’t be an after thought

26.

27.

28.

29. Designing for Oﬄine Experiences @strevat oﬄinestat.es

30. Designing for Oﬄine Experiences @strevat What works?

31. Designing for Oﬄine Experiences @strevat Focus on your core interaction.

32.

33.

34.

35.

36.

37.

38. Designing for Oﬄine Experiences @strevat Respond Optimistically? ~tread lightly~

39.

40. Designing for Oﬄine Experiences @strevat Placeholder/Skeleton UI ~the shape of content to come~

41.

42.

43.

44.

45.

46. Designing for Oﬄine Experiences @strevat Take it seriously.

47. Designing for Oﬄine Experiences @strevat Your product will work.

48. Designing for Oﬄine Experiences @strevat Your customers are happy because their product works.

49. Designing for Oﬄine Experiences @strevat A better UX will come with it, giving the product contour and making it more forgivable by better setting expectations with users.

50. Designing for Oﬄine Experiences @strevat Process

51. Designing for Oﬄine Experiences @strevat You will still design your experiences centered around your core interactions and core value

52. Designing for Oﬄine Experiences @strevat Your process isn’t changing, save for one leading question.

53. Designing for Oﬄine Experiences @strevat How should our core product value be experienced oﬄine?

54. Designing for Oﬄine Experiences @strevat Like Mobile First & Responsive Design, you make it part of your contextual design process

55. Designing for Oﬄine Experiences @strevat - reliable

56. Designing for Oﬄine Experiences @strevat - consistent

57. Designing for Oﬄine Experiences @strevat - fast

58. Designing for Oﬄine Experiences @strevat - higher valued

59. Designing for Oﬄine Experiences @strevat Community

60. Designing for Oﬄine Experiences @strevat Quarterly Oﬄine UXDC Collaboratives

61. Designing for Offline Experiences @strevat Slack offlinefirst.org/chat Offline Newsletter offlinefirst.org/news Medium medium.com/offline-camp

62. Thank you. @strevat

63. Art by Bruce Riley https://www.ﬂickr.com/photos/17036157@N03/sets

Designing For Offline

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to Designing For Offline

Similar to Designing For Offline (20)

Recently uploaded

Recently uploaded (20)

Designing For Offline