SlideShare a Scribd company logo
Building Real Things
for Real People
Human Experience Design
#M3Real@developerjustin
Justin Ferrell
Developer
#M3Real@developerjustin
Introduction. Justin Ferrell, I’m a developer.
#M3Real@developerjustin
Digital Relativity. Fayetteville, WV. Started with mobile web in high school, studied computer science and IT at a couple of schools in WV and VA. Eventually ended up at Relativity doing mobile web, learned
Titanium and Mono, and started doing desktop web.
Design
vs
Development
#M3Real@developerjustin
Jump right into it. The idea of design vs development. A lot of people like to silo these and draw a hard line between these like they’re black and white. But, I don’t really think that’s the case anymore. Even this
morning, learned that Dan Shultz, great developer, great speaker, has a fine arts degree. And he is 100% developer. The one of many cases where design and development converge. Hopefully we can find
some more common ground today. Because that’s what it’s going to take to push us forward. We can see it happening everywhere around us. Design and engineering are converging, and it’s paying off. Look at
Apple…
#M3Real@developerjustin
Last Fall, Apple fired Scott Forstall, who was head of iOS at the time, and appointed Jonathan Ive senior vp of design and Craig Federighi Senior VP Software Engineering. Together, the two took over his
duties.
All Apple products released since, including iOS 7, the iPhone 5C, the iPhone 5S have been the brainchild of these two, working together. BusinessWeek interviewed them recently. The two described how their
working together, design and development working together, allows them to build and ship better products because they are “less than a minute” from each other. Not only are they shipping better products, but
they’re doing it faster. It wasn’t forced or anything unnatural. Working together just allowed them to work better.
Development + UX
#M3Real@developerjustin
Generally, the products we’re building are not simple beasts. There are moving pieces and parts that have to play well for us to get to where we want. It’s usually up to a designer to determine how it looks and
how users interact with it. But the burden to not only build it and make it work, but to build it and make it work well, comes down on developers. Managing bandwidth constraints over poor cellular connections,
optimizing code, gracefully degrading, device support. Failing, as all software will do at some point, is something that developers have to handle. Even if the designer handles the look of the failure, the
developers have to catch it. It’s on them to determine what an error actually is. Neither of these disciplines could really handle this without the other.
Tear Down The Wall
#M3Real@developerjustin
What we’re looking at is tearing down that old-school mentality of designers and developers living in different worlds and speaking different languages. This doesn’t mean that your designers should be writing
PHP or that your developers should learn how to use Photoshop. But they should be collaborating. There’s a reason you can take a PSD and ship it off to be ripped into HTML for $200. Because it’s easy, and
because the people doing it don’t care about usability or things like load times and bandwidth constraints. Steve Jobs said that computer science was a liberal art, and it very much is. We have to approach
these problems creatively to come to creative solutions. If we could solve problems and solve them well without being creative then all of our smartwatches would have ethernet ports. Which is where the case
for collaboration comes in.
Collaboration
#M3Real@developerjustin
Collaboration allows the team as a whole to ship better products because there are no “phases”. You’re not playing telephone with the product. Imagine that the UX folks wanted one thing, the designer came up
with another thing but the developers did it another way so that they could use a certain framework. Just...No. That system is vastly flawed because it prevents us from following a cohesive vision and building
something that we can all be proud of. It seems like that is the root of the disconnect between development and design because it’s so hard for the two to pass ideas back and forth without things being lost in
translation. For us at Relativity, we start with information architecture, then we do wireframes, then we hit photoshop and then we use that to build the product. There are phases just like with anything else, but
we’re all involved in every phase. The moment the architecture is finalized, the other developers and I get access to it. Before there is even a wireframe, the developers are involved. This helps us outline better
deliverables and ultimately ship better, more optimized products. Optimization is key here, because speed and responsiveness are huge parts of usability.
But how does it work?
#M3Real@developerjustin
System design is a huge part of the usability. Let’s say we’re building a trip planner and every stop on the itinerary has to be its own page, or every product page needs to be the child of a product category
page, but there are no forward-facing category pages. But, how will the map work on a phone? Maybe we need to show all 1,500 products on one page that is filtered dynamically with jQuery. Developers hear
these sorts of demands from designers and UX folks every day. But how do you build these things? What does the backend of that look like? How can these be optimized? These are legitimate usability
concerns because performance and graceful failure directly impact usability. Developers have to be slimming down their database queries, moving as little information back and forth as possible. Trimming their
API calls to conserve data. Watching memory allocations on the client and server sides to keep everything running smoothly. Monitoring bandwidth constraints because let’s face it, not every connection is wifi,
and not every wifi connection is solid.
Development + UX
#M3Real@developerjustin
These are all things that impact usability that developers have to address as much as designers do. Development is, or should be, a huge part of the usability and design process because it is, in most cases,
the last lens that a product goes through. The quality of the design and the experience don’t really matter if the dev team isn’t working toward the same vision. Which is what creates a need for developers to
strive toward better user experiences. Your chain is only as strong as its weakest link and your product is only as good as the worst phase in the production cycle.
Trim the Fat
#M3Real@developerjustin
Speaking as a developer, I can say that we’re fairly easy to spoil. We’re really good, as an industry, at building things that do work for us that we used to do ourselves. Things like content management systems,
garbage collection, javascript frameworks, HTML5 boilerplates, SDK’s and libraries. There was a time when we built these things every time we built anything. We’ve all been guilty of cutting corners at one time
or another. But it isn’t so much cutting corners itself that’s an issue. We work smart, not hard. These frameworks removed a lot of work and made the industry as a whole more efficient and helped us move on
to building cooler more powerful things. The issue with cutting corners is when you’re not working smart or hard. I’ve got a pretty good example of this.
#M3Real@developerjustin
This is a great example. What is the first difference that you see between these two files? There are a couple things that are wrong with one of them, but we’re looking for two things in particular.
$thisID
get_the_ID()
#M3Real@developerjustin
$cfarray
get_post_meta()
The difference is this. We were calling get_post_meta once for every field when we really only needed to call it once. And for every get_post_meta call, we were calling get_the_ID(). That’s two database calls
for every field when we really only needed two calls total. To a lot of people, this is really obvious. It was obvious to us after we looked at it for a couple of seconds. But there are developers around the world
who would ship this because it does work. The end result is exactly the same. It’s about a second slower, but what impact does that really have?
Need for Speed
#M3Real@developerjustin
It matters a lot more than you think. Google has made it very clear as far back as 2009 that page speed impacts search. If no one can find the site, no one can use it. Another statistic released by Google
explained that 1 in 4 users will abandon a site that takes more than four seconds to load. They also noted that while it handles over 3 billion searches a day, increasing load time by less than half a second, 8
million queries were immediately abandoned. AND a similar study revealed that 3 out of 5 users who abandon a site will not come back. Experience design is only half the battle if we don’t have people finding
and using the products. So obviously, literally, every little bit counts. Speed and performance directly impact the success of a product across the board, from find-ability to usability. If no one’s finding the product,
no one is using the product. And even if they’re finding it, no one is using it if it’s slow. So where can we, developers, start if we want to trim down the size of our products?
Image Optimization
@developerjustin #M3Real
The first big one is image optimization. There is so much information in image files that just isn’t needed at all. It just takes up space for no real reason in most cases. And we load it all into memory when we
display these images. Each and every time. It impacts memory consumption, it impacts memory allocation, it impacts binary size. So much information that we just don’t do anything with. And in some cases,
our largest graphics aren’t even used because the devices the apps aren’t installed on don’t have screens with a high in enough pixel density like retina or most high-end android. It’s just wasted space and
ultimately, wasted system resources. So how can we work to optimize our images, and what are some examples of image files optimized really well?
#M3Real
The first and probably best example of image optimization done really well is Tweetbot for the iPad. Most of you probably know what Tweetbot is. It’s is a great example of image optimization done correctly.
Tweetbot is, as most of you are aware, an iOS-only Twitter client. And it’s pretty awesome. Great features. But the UI uses A LOT of graphics. The entire UI is really rich, graphically. But even on an old first gen
iPad like mine, it’s really snappy and a lot of that is thanks to image compression.
#M3Real
There is a free program for OSX called ImageOptim that literally strips all of the stuff that isn’t needed from graphics. I use it on every single piece of software that I ship. I’ve seen it reduce the size of image
files by over 95% while maintaining virtually the exact same quality. If we zoom in a bit on that chart…
http://imageoptim.com/tweetbot.html - #M3Real
You can see that when used with ImageAlpha, another free tool offered by the same people who built ImageOptim the overall size of the graphics is reduced by over 75%. ImageAlpha does this by removing
unused alpha values and transparency information from PNG and GIF files.That’s a huge difference though. The difference between file size between ImageOptim and Xcode optimization is unreal. That could
make the difference between someone being able or not being able to download the app over a cellular connection. Remember no code changes, no loss in quality. The exact same app. But less than 20% of
it’s original size. But what about actual performance?
http://imageoptim.com/tweetbot.html - #M3Real
We immediately see the relationship between file size and performance. With xcode compression disabled, we see that ImageOptim and ImageAlpha combined can give us about 2.5x regular
speed when displaying UIImageViews. Now think about that on the scale of something like a twitter timeline where every row has a remote image associated with it. That alone is saving us
seconds at a time on a large scale. These are the kinds of things that can make or break a user experience and they require absolutely no code or loss of quality or functionality. We’re just
removing unused information from image files.
http://sam.roon.io/image-optimization-on-ios - #M3Real
Another great example of this is Incredibooth, from the folks that build Hipstamatic. Universal for iPad and iPhone The app was originally 70mb. After using ImageOptim and ImageAlpha, they were able to get it
to 31mb with no visible reduction in quality, even on retina devices. That’s close to half the size with zero code changes and zero quality loss. Just removing unused information from image files.
ImageOptim + ImageAlpha
@developerjustin #M3Real
These programs work for mobile web, desktop web, everything. Smaller image with no quality loss are always better. Even on the web, these files are being downloaded, rendered and using system resources.
So, a lot we can do to improve our graphical resources.
Efficiency
@developerjustin #M3Real
It’s not really just about system efficiency though. It’s also about us being more efficient in the way that we build things. We need to be able to design, build and ship awesome products quickly. Devices and use
cases are evolving. That’s where the need for things like responsive design and cross-platform development come from. We can’t really count on everyone to have the same device with the same processor
and the same OS and the same pixel density and resolution. We just can’t. We live in a world where there are cars running embedded Android systems and Apple might be shipping a watch. We need to be
building scalable solutions that work across the spectrum because that’s where the users are: the spectrum.
Evolution
@developerjustin #M3Real
And it’s that evolution, that fluidity, that should be changing the way that approach and solve problems. We have a designer at Relativity who just graduated from college with a degree in graphic design. Art
scholarship, plenty of great work. Solid guy. And he was telling me that when he was just an intern at our company, his classmates were ASTOUNDED, like floored, that he talked to and worked with developers
on a regular basis. And that just seemed silly to me. These kids thoroughly and legitimately shocked that he was able to talk to his coworkers. The real world is going to chew them up and spit them out. That’s
just ridiculous. That, to me, paired with everything else I’ve shown you, shows me that we, as a culture, aren’t evolving quickly enough to solve the problems that exist within the products we create. We’re trying
to get our products into the hands of as many users as possible right?
Users vs Humans
#M3Real@developerjustin
I would argue that that isn’t entirely true. We need our products in the hands of as many humans as possible. A car is a user because it uses gasoline. My laptop is a user because it uses the internet, it uses
electricity. But human beings are different. Human beings are sensitive and malleable. They’re like overly ripe bananas. They’re mushy. In the keynote earlier, Chris compared it to Where’s Waldo. “Hey, there is
a human being here. An actual living, breathing person is involved. And they’re emotional.” And he talked about existing patterns of behavior and how much of a waste of time and money it is to change them.
There have been more studies in the last 30 years that outlines how things like font size, color, text direction and kerning affect human behavior. And it’s because we’re creatures of habit. Things affect us, as a
species, pretty much the same way. Experiments have proven it. And the thing about experiments and findings that can’t be reproduced is that they are worthless because they don’t prove anything. But all of
these things can be reproduced. They ARE reproduced. Every day. Around the world. By literally thousands of companies. All for the purpose of making people do things. Manipulating people.
Manipulating people. Because that’s really what we’re trying to do. Even if it’s for their own good. We need to get people, human beings, from A to B, because B is where great things happen. Ideally, in a
morally acceptable scenario, there is something good for everyone when we reach B. You click the big red button, you get a Macbook Pro. You click the big red button, Apple gets paid for a Macbook Pro. All of
the people involved in the creation of that Macbook Pro get paid. We all win. A friend of mine who is speaking here, Andrew Heaton, actually summarized this really well in his book Purposely Irregular.
@tigerstripe
Clients have money, clients have projects, clients have customers and sometimes a goal. We can make this shit happen. And that’s so true. All of the pieces exist. They’re all there, just waiting. There are
human beings willing to do things and there are companies who need to people to do them. We just have to push the humans in that direction. That’s where the magic happens. That’s where users get
awesome tools and we get paid for building them. We’re building tools that push all of the pieces together so we can all get to B because like I said, B is awesome.
#M3Real@developerjustin
Coming back to the Apple example. Apple invented the iPhone, the Mac, OSX, iOS all of it. So when they go the drawing board for the 5S or Mavericks,
they’re working on solving problems that they may not have necessarily created, but they made it possible for them to exist. They just needed users to
help them evolve past them. They presented the world with devices, and the world used it. They take that and use it to make that next version better.
That’s how evolution works. So we see them and their devices evolving as the spectrum does. And their products are all the better for it.
Building Real Things
for Real People
Human Experience Design
#M3Real@developerjustin
So, the point of every good talk is having some kind of solid take away. Something to make it feel worth it.
Designers + Developers
#M3Real@developerjustin
First, Designers and developers should be friends. Don’t be afraid to talk to each other and work together. That’s where the magic is. The one way we’re going to get from A to B is together. And B is where great
things happen for everyone. Collaborating between disciplines is what it’s going to take for us to innovate and evolve with our users. It’s like hockey. Don’t go where the puck is, go where the puck is going.
Speed Matters
#M3Real@developerjustin
Second, Speed matters. A lot. Every single fraction of a second that you can save is worth it because every delay is a chance for someone to turn around
and leave. Keep things like bandwidth and performance in mind because those are the things that are going to make or break the user’s experience and
determine whether they come back again or not.
ImageOptim + ImageAlpha
#M3Real@developerjustin
This one falls in with the last one but it deserves its own slide. Stop wasting unnecessary resources on images. You can reduce binary size, increase
performance and just make your products all around better by removing a ton of data that you’re not using anyway. We’re talking about decreasing your
app size by literally half and potentially even more, while also making it faster.
We Can Make This Happen
#M3Real@developerjustin
Finally, all of the pieces are there. All of them. The people, the tools, the languages, the devices, the marketplaces. It’s all there. We’ve been handed
everything. It’s just up to us to push of all of these things together and make the magic happen. We just have to get everyone from A to B. Because B is
great for everyone.
#M3Real@developerjustin
Questions
Questions?
#M3Real
@developerjustin
Thanks!

More Related Content

What's hot

User Story Mapping, Discover the whole story
User Story Mapping, Discover the whole storyUser Story Mapping, Discover the whole story
User Story Mapping, Discover the whole story
Jeff Patton
 
[EN] Great software development quotes
[EN] Great software development quotes[EN] Great software development quotes
[EN] Great software development quotes
Eudris Cabrera
 
SAD01 - An Introduction to Systems Analysis and Design
SAD01 - An Introduction to Systems Analysis and DesignSAD01 - An Introduction to Systems Analysis and Design
SAD01 - An Introduction to Systems Analysis and Design
Michael Heron
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)
Bill Scott
 
AD - Developer communication and Technology
AD - Developer communication and TechnologyAD - Developer communication and Technology
AD - Developer communication and Technology
Enplore AB
 
Amuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingAmuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform Thinking
Yury Vetrov
 
Final Agile Forum
Final Agile ForumFinal Agile Forum
Final Agile Forum
Designit
 
The Evolution of UX in Virtual Reality
The Evolution of UX in Virtual RealityThe Evolution of UX in Virtual Reality
The Evolution of UX in Virtual Reality
Dialexa
 
Code with Empathy: UX for Engineers and UX Developers
Code with Empathy: UX for Engineers and UX DevelopersCode with Empathy: UX for Engineers and UX Developers
Code with Empathy: UX for Engineers and UX Developers
Anita Cheng
 
AgileCamp Silicon Valley 2015: User Story Mapping
AgileCamp Silicon Valley 2015: User Story MappingAgileCamp Silicon Valley 2015: User Story Mapping
AgileCamp Silicon Valley 2015: User Story Mapping
Hyperdrive Agile Leadership (powered by Bratton & Company)
 
Owning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic EnvironmentsOwning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic Environments
guestf4f7a4b38
 
Html5 miami2012
Html5 miami2012Html5 miami2012
Html5 miami2012
Carl Ford
 
UX class presentation
UX class presentationUX class presentation
UX class presentation
Theo V
 
Ten Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileTen Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for Mobile
Vicke Cheung
 
Enterprise UX Industry Report 2017–2018
Enterprise UX Industry Report 2017–2018Enterprise UX Industry Report 2017–2018
Enterprise UX Industry Report 2017–2018
Lewis Lin 🦊
 
From design specs to user stories (ProductCamp Boston 2016)
From design specs to user stories (ProductCamp Boston 2016)From design specs to user stories (ProductCamp Boston 2016)
From design specs to user stories (ProductCamp Boston 2016)
ProductCamp Boston
 
Generative Design and Design Hacking
Generative Design and Design HackingGenerative Design and Design Hacking
Generative Design and Design Hacking
Designit
 
Better Product Definition with Lean UX and Design Thinking
Better Product Definition with Lean UX and Design ThinkingBetter Product Definition with Lean UX and Design Thinking
Better Product Definition with Lean UX and Design Thinking
Jeff Gothelf
 
Whittle Modeling Wizards 2012
Whittle Modeling Wizards 2012Whittle Modeling Wizards 2012
Whittle Modeling Wizards 2012
jonathw
 
Remote First Team Collaboration Tool
Remote First Team Collaboration ToolRemote First Team Collaboration Tool
Remote First Team Collaboration Tool
Jessica Arevalo
 

What's hot (20)

User Story Mapping, Discover the whole story
User Story Mapping, Discover the whole storyUser Story Mapping, Discover the whole story
User Story Mapping, Discover the whole story
 
[EN] Great software development quotes
[EN] Great software development quotes[EN] Great software development quotes
[EN] Great software development quotes
 
SAD01 - An Introduction to Systems Analysis and Design
SAD01 - An Introduction to Systems Analysis and DesignSAD01 - An Introduction to Systems Analysis and Design
SAD01 - An Introduction to Systems Analysis and Design
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)
 
AD - Developer communication and Technology
AD - Developer communication and TechnologyAD - Developer communication and Technology
AD - Developer communication and Technology
 
Amuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform ThinkingAmuse UX 2015: Y.Vetrov — Platform Thinking
Amuse UX 2015: Y.Vetrov — Platform Thinking
 
Final Agile Forum
Final Agile ForumFinal Agile Forum
Final Agile Forum
 
The Evolution of UX in Virtual Reality
The Evolution of UX in Virtual RealityThe Evolution of UX in Virtual Reality
The Evolution of UX in Virtual Reality
 
Code with Empathy: UX for Engineers and UX Developers
Code with Empathy: UX for Engineers and UX DevelopersCode with Empathy: UX for Engineers and UX Developers
Code with Empathy: UX for Engineers and UX Developers
 
AgileCamp Silicon Valley 2015: User Story Mapping
AgileCamp Silicon Valley 2015: User Story MappingAgileCamp Silicon Valley 2015: User Story Mapping
AgileCamp Silicon Valley 2015: User Story Mapping
 
Owning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic EnvironmentsOwning the Interaction in Dynamic Environments
Owning the Interaction in Dynamic Environments
 
Html5 miami2012
Html5 miami2012Html5 miami2012
Html5 miami2012
 
UX class presentation
UX class presentationUX class presentation
UX class presentation
 
Ten Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileTen Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for Mobile
 
Enterprise UX Industry Report 2017–2018
Enterprise UX Industry Report 2017–2018Enterprise UX Industry Report 2017–2018
Enterprise UX Industry Report 2017–2018
 
From design specs to user stories (ProductCamp Boston 2016)
From design specs to user stories (ProductCamp Boston 2016)From design specs to user stories (ProductCamp Boston 2016)
From design specs to user stories (ProductCamp Boston 2016)
 
Generative Design and Design Hacking
Generative Design and Design HackingGenerative Design and Design Hacking
Generative Design and Design Hacking
 
Better Product Definition with Lean UX and Design Thinking
Better Product Definition with Lean UX and Design ThinkingBetter Product Definition with Lean UX and Design Thinking
Better Product Definition with Lean UX and Design Thinking
 
Whittle Modeling Wizards 2012
Whittle Modeling Wizards 2012Whittle Modeling Wizards 2012
Whittle Modeling Wizards 2012
 
Remote First Team Collaboration Tool
Remote First Team Collaboration ToolRemote First Team Collaboration Tool
Remote First Team Collaboration Tool
 

Viewers also liked

Quran & human birth
Quran & human birthQuran & human birth
Quran & human birth
Khazi Javid
 
quran and modern science
quran and modern sciencequran and modern science
quran and modern science
Khazi Javid
 
Determinantes tarea
Determinantes tareaDeterminantes tarea
Determinantes tarea
Frank Grandez
 
15 QR Code Ideas to Blow Your Customers' Minds
15 QR Code Ideas to Blow Your Customers' Minds15 QR Code Ideas to Blow Your Customers' Minds
15 QR Code Ideas to Blow Your Customers' Minds
Justin Ferrell
 
Ppt bangalore
Ppt bangalorePpt bangalore
Ppt bangalore
Khazi Javid
 
Quran and science-part 3
Quran and science-part 3Quran and science-part 3
Quran and science-part 3
Khazi Javid
 

Viewers also liked (6)

Quran & human birth
Quran & human birthQuran & human birth
Quran & human birth
 
quran and modern science
quran and modern sciencequran and modern science
quran and modern science
 
Determinantes tarea
Determinantes tareaDeterminantes tarea
Determinantes tarea
 
15 QR Code Ideas to Blow Your Customers' Minds
15 QR Code Ideas to Blow Your Customers' Minds15 QR Code Ideas to Blow Your Customers' Minds
15 QR Code Ideas to Blow Your Customers' Minds
 
Ppt bangalore
Ppt bangalorePpt bangalore
Ppt bangalore
 
Quran and science-part 3
Quran and science-part 3Quran and science-part 3
Quran and science-part 3
 

Similar to Building real things for real people 2009

Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
Christian Heilmann
 
Big guns for small guys (reloaded)
Big guns for small guys (reloaded)Big guns for small guys (reloaded)
Big guns for small guys (reloaded)
Jorge López-Lago
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
Holger Bartel
 
Front Porch Keynote 2014
Front Porch Keynote 2014Front Porch Keynote 2014
Front Porch Keynote 2014
amboy00
 
2020 Top Web Development Trends
2020 Top Web Development Trends2020 Top Web Development Trends
2020 Top Web Development Trends
Pencil Agency
 
Reactive Microservice Architecture with Groovy and Grails
Reactive Microservice Architecture with Groovy and GrailsReactive Microservice Architecture with Groovy and Grails
Reactive Microservice Architecture with Groovy and Grails
Steve Pember
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
uxpin
 
Software Development in 21st Century
Software Development in 21st CenturySoftware Development in 21st Century
Software Development in 21st Century
Henry Jacob
 
Agile Architecture
Agile ArchitectureAgile Architecture
Agile Architecture
Steve Green
 
Iti_(2).pdf
Iti_(2).pdfIti_(2).pdf
Iti_(2).pdf
RanaFoud
 
From 🤦 to 🐿️
From 🤦 to 🐿️From 🤦 to 🐿️
From 🤦 to 🐿️
Ori Pekelman
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature Creature
Christian Heilmann
 
Responsive Web Design vs Mobile Web App
Responsive Web Design  vs  Mobile Web AppResponsive Web Design  vs  Mobile Web App
Responsive Web Design vs Mobile Web App
Sheeraz Qurban
 
Sbwire 531031
Sbwire 531031Sbwire 531031
Sbwire 531031
Tourism Dental India
 
Design Types
Design TypesDesign Types
Design Types
1&1
 
The difference between Web Design & web development
The difference between Web Design & web developmentThe difference between Web Design & web development
The difference between Web Design & web development
sneharathod39
 
Put a UI Developer in a Bank; See What Happens
Put a UI Developer in a Bank; See What HappensPut a UI Developer in a Bank; See What Happens
Put a UI Developer in a Bank; See What Happens
C4Media
 
Web Application Development Company
Web Application Development Company  Web Application Development Company
Web Application Development Company
Shelly Megan
 
Internet of Things Brings On Development Demands That DevOps Manages, Say Exp...
Internet of Things Brings On Development Demands That DevOps Manages, Say Exp...Internet of Things Brings On Development Demands That DevOps Manages, Say Exp...
Internet of Things Brings On Development Demands That DevOps Manages, Say Exp...
Dana Gardner
 
WinSmart Technologies
WinSmart TechnologiesWinSmart Technologies
WinSmart Technologies
bijunairk
 

Similar to Building real things for real people 2009 (20)

Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
 
Big guns for small guys (reloaded)
Big guns for small guys (reloaded)Big guns for small guys (reloaded)
Big guns for small guys (reloaded)
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
 
Front Porch Keynote 2014
Front Porch Keynote 2014Front Porch Keynote 2014
Front Porch Keynote 2014
 
2020 Top Web Development Trends
2020 Top Web Development Trends2020 Top Web Development Trends
2020 Top Web Development Trends
 
Reactive Microservice Architecture with Groovy and Grails
Reactive Microservice Architecture with Groovy and GrailsReactive Microservice Architecture with Groovy and Grails
Reactive Microservice Architecture with Groovy and Grails
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
 
Software Development in 21st Century
Software Development in 21st CenturySoftware Development in 21st Century
Software Development in 21st Century
 
Agile Architecture
Agile ArchitectureAgile Architecture
Agile Architecture
 
Iti_(2).pdf
Iti_(2).pdfIti_(2).pdf
Iti_(2).pdf
 
From 🤦 to 🐿️
From 🤦 to 🐿️From 🤦 to 🐿️
From 🤦 to 🐿️
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature Creature
 
Responsive Web Design vs Mobile Web App
Responsive Web Design  vs  Mobile Web AppResponsive Web Design  vs  Mobile Web App
Responsive Web Design vs Mobile Web App
 
Sbwire 531031
Sbwire 531031Sbwire 531031
Sbwire 531031
 
Design Types
Design TypesDesign Types
Design Types
 
The difference between Web Design & web development
The difference between Web Design & web developmentThe difference between Web Design & web development
The difference between Web Design & web development
 
Put a UI Developer in a Bank; See What Happens
Put a UI Developer in a Bank; See What HappensPut a UI Developer in a Bank; See What Happens
Put a UI Developer in a Bank; See What Happens
 
Web Application Development Company
Web Application Development Company  Web Application Development Company
Web Application Development Company
 
Internet of Things Brings On Development Demands That DevOps Manages, Say Exp...
Internet of Things Brings On Development Demands That DevOps Manages, Say Exp...Internet of Things Brings On Development Demands That DevOps Manages, Say Exp...
Internet of Things Brings On Development Demands That DevOps Manages, Say Exp...
 
WinSmart Technologies
WinSmart TechnologiesWinSmart Technologies
WinSmart Technologies
 

Recently uploaded

Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
LucaBarbaro3
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 

Recently uploaded (20)

Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 

Building real things for real people 2009

  • 1. Building Real Things for Real People Human Experience Design #M3Real@developerjustin
  • 3. #M3Real@developerjustin Digital Relativity. Fayetteville, WV. Started with mobile web in high school, studied computer science and IT at a couple of schools in WV and VA. Eventually ended up at Relativity doing mobile web, learned Titanium and Mono, and started doing desktop web.
  • 4. Design vs Development #M3Real@developerjustin Jump right into it. The idea of design vs development. A lot of people like to silo these and draw a hard line between these like they’re black and white. But, I don’t really think that’s the case anymore. Even this morning, learned that Dan Shultz, great developer, great speaker, has a fine arts degree. And he is 100% developer. The one of many cases where design and development converge. Hopefully we can find some more common ground today. Because that’s what it’s going to take to push us forward. We can see it happening everywhere around us. Design and engineering are converging, and it’s paying off. Look at Apple…
  • 5. #M3Real@developerjustin Last Fall, Apple fired Scott Forstall, who was head of iOS at the time, and appointed Jonathan Ive senior vp of design and Craig Federighi Senior VP Software Engineering. Together, the two took over his duties. All Apple products released since, including iOS 7, the iPhone 5C, the iPhone 5S have been the brainchild of these two, working together. BusinessWeek interviewed them recently. The two described how their working together, design and development working together, allows them to build and ship better products because they are “less than a minute” from each other. Not only are they shipping better products, but they’re doing it faster. It wasn’t forced or anything unnatural. Working together just allowed them to work better.
  • 6. Development + UX #M3Real@developerjustin Generally, the products we’re building are not simple beasts. There are moving pieces and parts that have to play well for us to get to where we want. It’s usually up to a designer to determine how it looks and how users interact with it. But the burden to not only build it and make it work, but to build it and make it work well, comes down on developers. Managing bandwidth constraints over poor cellular connections, optimizing code, gracefully degrading, device support. Failing, as all software will do at some point, is something that developers have to handle. Even if the designer handles the look of the failure, the developers have to catch it. It’s on them to determine what an error actually is. Neither of these disciplines could really handle this without the other.
  • 7. Tear Down The Wall #M3Real@developerjustin What we’re looking at is tearing down that old-school mentality of designers and developers living in different worlds and speaking different languages. This doesn’t mean that your designers should be writing PHP or that your developers should learn how to use Photoshop. But they should be collaborating. There’s a reason you can take a PSD and ship it off to be ripped into HTML for $200. Because it’s easy, and because the people doing it don’t care about usability or things like load times and bandwidth constraints. Steve Jobs said that computer science was a liberal art, and it very much is. We have to approach these problems creatively to come to creative solutions. If we could solve problems and solve them well without being creative then all of our smartwatches would have ethernet ports. Which is where the case for collaboration comes in.
  • 8. Collaboration #M3Real@developerjustin Collaboration allows the team as a whole to ship better products because there are no “phases”. You’re not playing telephone with the product. Imagine that the UX folks wanted one thing, the designer came up with another thing but the developers did it another way so that they could use a certain framework. Just...No. That system is vastly flawed because it prevents us from following a cohesive vision and building something that we can all be proud of. It seems like that is the root of the disconnect between development and design because it’s so hard for the two to pass ideas back and forth without things being lost in translation. For us at Relativity, we start with information architecture, then we do wireframes, then we hit photoshop and then we use that to build the product. There are phases just like with anything else, but we’re all involved in every phase. The moment the architecture is finalized, the other developers and I get access to it. Before there is even a wireframe, the developers are involved. This helps us outline better deliverables and ultimately ship better, more optimized products. Optimization is key here, because speed and responsiveness are huge parts of usability.
  • 9. But how does it work? #M3Real@developerjustin System design is a huge part of the usability. Let’s say we’re building a trip planner and every stop on the itinerary has to be its own page, or every product page needs to be the child of a product category page, but there are no forward-facing category pages. But, how will the map work on a phone? Maybe we need to show all 1,500 products on one page that is filtered dynamically with jQuery. Developers hear these sorts of demands from designers and UX folks every day. But how do you build these things? What does the backend of that look like? How can these be optimized? These are legitimate usability concerns because performance and graceful failure directly impact usability. Developers have to be slimming down their database queries, moving as little information back and forth as possible. Trimming their API calls to conserve data. Watching memory allocations on the client and server sides to keep everything running smoothly. Monitoring bandwidth constraints because let’s face it, not every connection is wifi, and not every wifi connection is solid.
  • 10. Development + UX #M3Real@developerjustin These are all things that impact usability that developers have to address as much as designers do. Development is, or should be, a huge part of the usability and design process because it is, in most cases, the last lens that a product goes through. The quality of the design and the experience don’t really matter if the dev team isn’t working toward the same vision. Which is what creates a need for developers to strive toward better user experiences. Your chain is only as strong as its weakest link and your product is only as good as the worst phase in the production cycle.
  • 11. Trim the Fat #M3Real@developerjustin Speaking as a developer, I can say that we’re fairly easy to spoil. We’re really good, as an industry, at building things that do work for us that we used to do ourselves. Things like content management systems, garbage collection, javascript frameworks, HTML5 boilerplates, SDK’s and libraries. There was a time when we built these things every time we built anything. We’ve all been guilty of cutting corners at one time or another. But it isn’t so much cutting corners itself that’s an issue. We work smart, not hard. These frameworks removed a lot of work and made the industry as a whole more efficient and helped us move on to building cooler more powerful things. The issue with cutting corners is when you’re not working smart or hard. I’ve got a pretty good example of this.
  • 12. #M3Real@developerjustin This is a great example. What is the first difference that you see between these two files? There are a couple things that are wrong with one of them, but we’re looking for two things in particular.
  • 13. $thisID get_the_ID() #M3Real@developerjustin $cfarray get_post_meta() The difference is this. We were calling get_post_meta once for every field when we really only needed to call it once. And for every get_post_meta call, we were calling get_the_ID(). That’s two database calls for every field when we really only needed two calls total. To a lot of people, this is really obvious. It was obvious to us after we looked at it for a couple of seconds. But there are developers around the world who would ship this because it does work. The end result is exactly the same. It’s about a second slower, but what impact does that really have?
  • 14. Need for Speed #M3Real@developerjustin It matters a lot more than you think. Google has made it very clear as far back as 2009 that page speed impacts search. If no one can find the site, no one can use it. Another statistic released by Google explained that 1 in 4 users will abandon a site that takes more than four seconds to load. They also noted that while it handles over 3 billion searches a day, increasing load time by less than half a second, 8 million queries were immediately abandoned. AND a similar study revealed that 3 out of 5 users who abandon a site will not come back. Experience design is only half the battle if we don’t have people finding and using the products. So obviously, literally, every little bit counts. Speed and performance directly impact the success of a product across the board, from find-ability to usability. If no one’s finding the product, no one is using the product. And even if they’re finding it, no one is using it if it’s slow. So where can we, developers, start if we want to trim down the size of our products?
  • 15. Image Optimization @developerjustin #M3Real The first big one is image optimization. There is so much information in image files that just isn’t needed at all. It just takes up space for no real reason in most cases. And we load it all into memory when we display these images. Each and every time. It impacts memory consumption, it impacts memory allocation, it impacts binary size. So much information that we just don’t do anything with. And in some cases, our largest graphics aren’t even used because the devices the apps aren’t installed on don’t have screens with a high in enough pixel density like retina or most high-end android. It’s just wasted space and ultimately, wasted system resources. So how can we work to optimize our images, and what are some examples of image files optimized really well?
  • 16. #M3Real The first and probably best example of image optimization done really well is Tweetbot for the iPad. Most of you probably know what Tweetbot is. It’s is a great example of image optimization done correctly. Tweetbot is, as most of you are aware, an iOS-only Twitter client. And it’s pretty awesome. Great features. But the UI uses A LOT of graphics. The entire UI is really rich, graphically. But even on an old first gen iPad like mine, it’s really snappy and a lot of that is thanks to image compression.
  • 17. #M3Real There is a free program for OSX called ImageOptim that literally strips all of the stuff that isn’t needed from graphics. I use it on every single piece of software that I ship. I’ve seen it reduce the size of image files by over 95% while maintaining virtually the exact same quality. If we zoom in a bit on that chart…
  • 18. http://imageoptim.com/tweetbot.html - #M3Real You can see that when used with ImageAlpha, another free tool offered by the same people who built ImageOptim the overall size of the graphics is reduced by over 75%. ImageAlpha does this by removing unused alpha values and transparency information from PNG and GIF files.That’s a huge difference though. The difference between file size between ImageOptim and Xcode optimization is unreal. That could make the difference between someone being able or not being able to download the app over a cellular connection. Remember no code changes, no loss in quality. The exact same app. But less than 20% of it’s original size. But what about actual performance?
  • 19. http://imageoptim.com/tweetbot.html - #M3Real We immediately see the relationship between file size and performance. With xcode compression disabled, we see that ImageOptim and ImageAlpha combined can give us about 2.5x regular speed when displaying UIImageViews. Now think about that on the scale of something like a twitter timeline where every row has a remote image associated with it. That alone is saving us seconds at a time on a large scale. These are the kinds of things that can make or break a user experience and they require absolutely no code or loss of quality or functionality. We’re just removing unused information from image files.
  • 20. http://sam.roon.io/image-optimization-on-ios - #M3Real Another great example of this is Incredibooth, from the folks that build Hipstamatic. Universal for iPad and iPhone The app was originally 70mb. After using ImageOptim and ImageAlpha, they were able to get it to 31mb with no visible reduction in quality, even on retina devices. That’s close to half the size with zero code changes and zero quality loss. Just removing unused information from image files.
  • 21. ImageOptim + ImageAlpha @developerjustin #M3Real These programs work for mobile web, desktop web, everything. Smaller image with no quality loss are always better. Even on the web, these files are being downloaded, rendered and using system resources. So, a lot we can do to improve our graphical resources.
  • 22. Efficiency @developerjustin #M3Real It’s not really just about system efficiency though. It’s also about us being more efficient in the way that we build things. We need to be able to design, build and ship awesome products quickly. Devices and use cases are evolving. That’s where the need for things like responsive design and cross-platform development come from. We can’t really count on everyone to have the same device with the same processor and the same OS and the same pixel density and resolution. We just can’t. We live in a world where there are cars running embedded Android systems and Apple might be shipping a watch. We need to be building scalable solutions that work across the spectrum because that’s where the users are: the spectrum.
  • 23. Evolution @developerjustin #M3Real And it’s that evolution, that fluidity, that should be changing the way that approach and solve problems. We have a designer at Relativity who just graduated from college with a degree in graphic design. Art scholarship, plenty of great work. Solid guy. And he was telling me that when he was just an intern at our company, his classmates were ASTOUNDED, like floored, that he talked to and worked with developers on a regular basis. And that just seemed silly to me. These kids thoroughly and legitimately shocked that he was able to talk to his coworkers. The real world is going to chew them up and spit them out. That’s just ridiculous. That, to me, paired with everything else I’ve shown you, shows me that we, as a culture, aren’t evolving quickly enough to solve the problems that exist within the products we create. We’re trying to get our products into the hands of as many users as possible right?
  • 24. Users vs Humans #M3Real@developerjustin I would argue that that isn’t entirely true. We need our products in the hands of as many humans as possible. A car is a user because it uses gasoline. My laptop is a user because it uses the internet, it uses electricity. But human beings are different. Human beings are sensitive and malleable. They’re like overly ripe bananas. They’re mushy. In the keynote earlier, Chris compared it to Where’s Waldo. “Hey, there is a human being here. An actual living, breathing person is involved. And they’re emotional.” And he talked about existing patterns of behavior and how much of a waste of time and money it is to change them. There have been more studies in the last 30 years that outlines how things like font size, color, text direction and kerning affect human behavior. And it’s because we’re creatures of habit. Things affect us, as a species, pretty much the same way. Experiments have proven it. And the thing about experiments and findings that can’t be reproduced is that they are worthless because they don’t prove anything. But all of these things can be reproduced. They ARE reproduced. Every day. Around the world. By literally thousands of companies. All for the purpose of making people do things. Manipulating people.
  • 25. Manipulating people. Because that’s really what we’re trying to do. Even if it’s for their own good. We need to get people, human beings, from A to B, because B is where great things happen. Ideally, in a morally acceptable scenario, there is something good for everyone when we reach B. You click the big red button, you get a Macbook Pro. You click the big red button, Apple gets paid for a Macbook Pro. All of the people involved in the creation of that Macbook Pro get paid. We all win. A friend of mine who is speaking here, Andrew Heaton, actually summarized this really well in his book Purposely Irregular.
  • 26. @tigerstripe Clients have money, clients have projects, clients have customers and sometimes a goal. We can make this shit happen. And that’s so true. All of the pieces exist. They’re all there, just waiting. There are human beings willing to do things and there are companies who need to people to do them. We just have to push the humans in that direction. That’s where the magic happens. That’s where users get awesome tools and we get paid for building them. We’re building tools that push all of the pieces together so we can all get to B because like I said, B is awesome.
  • 27. #M3Real@developerjustin Coming back to the Apple example. Apple invented the iPhone, the Mac, OSX, iOS all of it. So when they go the drawing board for the 5S or Mavericks, they’re working on solving problems that they may not have necessarily created, but they made it possible for them to exist. They just needed users to help them evolve past them. They presented the world with devices, and the world used it. They take that and use it to make that next version better. That’s how evolution works. So we see them and their devices evolving as the spectrum does. And their products are all the better for it.
  • 28. Building Real Things for Real People Human Experience Design #M3Real@developerjustin So, the point of every good talk is having some kind of solid take away. Something to make it feel worth it.
  • 29. Designers + Developers #M3Real@developerjustin First, Designers and developers should be friends. Don’t be afraid to talk to each other and work together. That’s where the magic is. The one way we’re going to get from A to B is together. And B is where great things happen for everyone. Collaborating between disciplines is what it’s going to take for us to innovate and evolve with our users. It’s like hockey. Don’t go where the puck is, go where the puck is going.
  • 30. Speed Matters #M3Real@developerjustin Second, Speed matters. A lot. Every single fraction of a second that you can save is worth it because every delay is a chance for someone to turn around and leave. Keep things like bandwidth and performance in mind because those are the things that are going to make or break the user’s experience and determine whether they come back again or not.
  • 31. ImageOptim + ImageAlpha #M3Real@developerjustin This one falls in with the last one but it deserves its own slide. Stop wasting unnecessary resources on images. You can reduce binary size, increase performance and just make your products all around better by removing a ton of data that you’re not using anyway. We’re talking about decreasing your app size by literally half and potentially even more, while also making it faster.
  • 32. We Can Make This Happen #M3Real@developerjustin Finally, all of the pieces are there. All of them. The people, the tools, the languages, the devices, the marketplaces. It’s all there. We’ve been handed everything. It’s just up to us to push of all of these things together and make the magic happen. We just have to get everyone from A to B. Because B is great for everyone.