Design - The first user test
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 133 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/48790 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC London 201630 / 133
2
6
10
12
15
17
23
24
28
30
31
32
35
36
39
40
43
44
45
47
51
52
55
58
59
60
61
62
63
64
67
69
71
73
74
75
82
84
86
87
97
103
107
108
111
112
114
115
117
120
123
126
128
129
132
133
00:00
Software developer2 (number)Software testingMobile appObject (grammar)Computer iconData storage deviceTouchscreenComputer animation
01:24
Software developerField (computer science)Software developerWindow1 (number)Ring (mathematics)Extension (kinesiology)Expert systemComputer animation
02:09
Coding theorySoftware developerFreewareSource codeMultiplication signGroup actionMereologyHand fanMobile appGoodness of fitWordWebsiteTerm (mathematics)Computer animation
03:17
Software developerProduct (business)Mobile appIdentity managementEuler anglesMereologySymbol tableArithmetic meanPattern languageAssociative propertyGraph coloringComputer animation
04:20
Power (physics)Software developerGraph coloringPattern languageAdditionFocus (optics)Instance (computer science)Different (Kate Ryan album)Computer animation
05:09
Software developerQuicksortGraph coloringContrast (vision)Reading (process)Prime idealInstance (computer science)DialectEnvelope (mathematics)Square numberComputer animation
06:08
Software developerGraph coloringSquare numberContrast (vision)BitField (computer science)Archaeological field surveyComputer animation
07:06
Software developerGraph coloringDifferent (Kate Ryan album)GenderMobile appCategory of beingBookmark (World Wide Web)Group actionAxiom of choiceComputer animation
08:26
Software developerAxiom of choiceMobile appGraph coloringContrast (vision)Range (statistics)CASE <Informatik>HypermediaTwitterComputer animation
09:23
Software developerGraph coloringContrast (vision)Axiom of choiceOverlay-NetzBounded variationComputing platformSet (mathematics)Mobile appNumbering schemeComputer fileSelectivity (electronic)Goodness of fitHierarchyComputer animation
10:46
Software developerGoodness of fitComa BerenicesGraph coloringWebsiteSampling (statistics)Multiplication signMedical imagingComputer animation
11:51
Software developerComputer iconGraph coloringGreen's functionMobile appBitMathematicsLine (geometry)Computer animation
13:02
Software developerBounded variationOverlay-NetzGraph coloringOverlay-NetzDisk read-and-write headBounded variationDifferent (Kate Ryan album)Water vaporRational numberComputer animation
13:58
Software developerArithmetic meanHydraulic jumpDialectWater vaporGraph coloringPhase transitionType theoryComputer animation
14:41
Software developerMultiplication signCompilation albumMultiplication signSpacetimeComputer animation
15:32
Software developerDigital mediaGraph coloringStorage area networkHypermediaSpacetimeWeightTouchscreenWordDataflowQuicksortLine (geometry)Contrast (vision)WebsiteComputer animation
16:38
TunisSoftware developerCASE <Informatik>Storage area networkObservational studyElectronic visual displayInformation overloadCausalityProgram slicingForm (programming)Flow separationComputer animationJSONLecture/Conference
17:43
Software developerHierarchySound effectOrder (biology)Projective planeHypermediaDigital mediaSound effectDrop (liquid)Mobile appGraph coloringGradientSpacetimeBitDisk read-and-write headAcoustic shadowType theoryHierarchyComputer fontRight angleWordSheaf (mathematics)Pattern languageSpecial unitary groupImage resolutionMultiplication signEmailGoodness of fitInstance (computer science)TouchscreenUniform resource locatorWebsiteKey (cryptography)Forcing (mathematics)Group actionComputer animation
21:06
Software developerComputer iconSymbol tableProcess (computing)Computer fontCombinational logicMobile appStorage area network40 (number)Computer animation
22:14
Software developerRight angleGraph coloringMobile appComputer iconComputing platformDigital mediaProduct (business)MetreMedical imagingData storage deviceComa BerenicesPlastikkarteWindowCartesian coordinate systemAmsterdam Ordnance DatumLatent heatPlanningType theoryWeb 2.0Projective planeLetterpress printingComputer animation
25:29
Software developerBounded variationTesselationFacebookMobile appComputer iconPlastikkarteService (economics)Graph coloringData miningRevision controlDemo (music)Computer animation
26:42
Software developerProjective planeGraph coloringPlanningComa BerenicesCross-platformComputer fontRevision controlNumberComputer iconSound effectClosed setPoint (geometry)Computer animation
27:34
Software developerComputer-generated imageryDigital photographyPoint (geometry)Closed setMedical imagingComputer-assisted translationContrast (vision)Digital photographyFluxLogic synthesisGradientPlanningGraph coloringComputer animation
28:36
Computer-generated imagerySoftware developerGraph coloringHand fanCuboidMedical imagingWebsiteWeb pageContrast (vision)Type theoryUsabilityMobile appDigital photographyRight angle
29:40
Software developerElement (mathematics)Medical imagingComputer fontOverlay-NetzEntire functionMobile appAbsolute value
30:29
Software developerMobile appMedical imagingPixelDifferent (Kate Ryan album)Digital photographyModal logic1 (number)Computer animation
31:14
Software developerSystem callMenu (computing)Chemical equationComputer-generated imageryMedical imagingEmailContent (media)Line (geometry)BitProduct (business)Observational studyWebsiteComputer animation
32:39
Computer-generated imagerySoftware developerInformationDivisorFreewareMedical imagingMultiplication signDifferent (Kate Ryan album)Category of beingDigital photographyContent (media)Computer animation
33:50
Computer-generated imagerySoftware developerMedical imagingComputer-assisted translationDigital photographySpherical capComputer animation
34:34
Software developerDigital photographyFreewareRouter (computing)Medical imagingReal numberMobile appOffice suiteTrailObservational studyComputer animation
35:27
Computer-generated imagerySoftware developerDifferent (Kate Ryan album)Endliche ModelltheorieFile viewerTrailBitMedical imagingObservational studyComputer animation
36:10
Computer-generated imagerySoftware developerScalabilityPattern languageMathematicsMedical imagingFile viewerAxiom of choiceContrast (vision)Graph coloringDesign by contractSheaf (mathematics)Symbol tableComputer animation
37:16
Software developerMedical imagingForm (programming)Web pageMobile appInstance (computer science)MereologyBitTwitterGraph coloringComputer animation
38:15
Software developerComputing platformModeling languageInterface (computing)System callRule of inferencePixelTwitterComputer fontStress (mechanics)TouchscreenAdaptive behaviorOrientation (vector space)LaptopNumberGroup actionComputing platformReading (process)Mobile appPearson product-moment correlation coefficientLatent heatView (database)Set (mathematics)Image resolutionUser interfaceDifferent (Kate Ryan album)Formal languageTablet computerWebdesignWindowDependent and independent variablesClique-widthSurfaceComputer hardware1 (number)Computer configurationMereologyUtility softwareAndroid (robot)Sign (mathematics)GoogolCuboidComputer animation
43:35
Software developerReading (process)DataflowPosition operatorTouchscreenElement (mathematics)Mobile appOrientation (vector space)View (database)Instance (computer science)Sheaf (mathematics)Content (media)Amsterdam Ordnance DatumAdditionComputer animation
44:43
Software developerFunctional (mathematics)AdditionContent (media)Latent heatMobile appLevel (video gaming)Multiplication signView (database)Monster groupReal numberTouchscreenComputer animation
45:40
Software developerMultiplication signPivot elementSpacetimeLatent heatAxiom of choiceMathematical optimizationMenu (computing)Orientation (vector space)InformationTouchscreenMobile appUser interfaceWeb pageGame controllerWebsiteCASE <Informatik>DataflowComputer animationLecture/Conference
46:48
Software developerMobile appInformationComputing platformFree variables and bound variablesWeb pageGroup actionContent (media)Structural loadArithmetic progressionObject (grammar)TouchscreenSpeech synthesisInteractive televisionTouch typingComputer animation
48:02
Software developerMenu (computing)Instance (computer science)Element (mathematics)MereologyCASE <Informatik>AreaBlock (periodic table)Content (media)Link (knot theory)
48:57
Software developerGoogolWeb pageAndroid (robot)Web 2.0Thermal expansionVideoconferencingAxiom of choiceSoftware developerSet (mathematics)BlogComputing platformMassLink (knot theory)WindowConsistencyMultiplication signProcess (computing)Moment (mathematics)Different (Kate Ryan album)Mobile appType theoryGraph coloringMedical imagingSoftware testingDataflowRule of inferenceDistanceData storage deviceInstance (computer science)Web applicationStatisticsElectronic mailing list1 (number)Sound effectRow (database)Computer animation
56:02
Software developerComputer animation
Transcript: English(auto-generated)
00:06
Hi and welcome You guys are actually awesome for choosing to spending this last hour with me in design Because that means that you are already ahead of your competitors because you care about your users
00:23
Why is design so important? When I'm about to download an app I do a search in the store and the first thing I will notice is the icon and the name If it passed that test I will then go look at the screenshots and
00:45
It's not until after that I Will decide whether it's worth downloading or not So the quality of your app is already in question before they even downloads it
01:01
You only have seconds To convince your users that your app is of good quality The truth is that the users will judge your app based on design The objective of this session is to make your apps pass that first user test
01:25
My name is Jessica angstrom I'm I do like my superheroes. I Won't miss a chance to point out that Marvel is a better comic book company. Even if my husband doesn't agree Our wedding had a Star Trek theme
01:41
And we actually have star dates in our rings as well, and I never backed down from a cosplay Opportunity I have been called a geek But I take that as a compliment When Windows Phone came to Sweden, I became very active in the developer community Which led to me being selected for Microsoft Extended Expert team a few years ago
02:04
And this is my third year as a Microsoft MVP in the field of Windows development On our spare time me and my husband run a user group called coding off to work and We recently started a podcast with the same name But enough about me. Oh
02:22
Also, if you're a Star Wars fan, I do have some awesome stickers for you if you want to just come up to me later We have a lot of material to go through in a short amount of time So if you have any questions, please save them for the question part of the talk, so I'm sure I can get everything in
02:42
So let's get started To stand out in the crowd of apps and websites you can add personality And another term for personality is a branding Branding is a good stepping stone towards good design and user experience
03:04
So what is branding and why is it important? Branding comes from the word brander, which means to burn which is basically what we'll did when we marked up our cattle back in the day and
03:21
Today we are still using branding on our products and apps and stuff with a logo instead But branding is such much more than that It's a promise it's an expected quality it's a reputation a symbol of trust
03:40
character charisma attitude and so on Branding is not just a logo. I will concentrate on the part called brand identity and the first piece is color Now there's a lot of preconceptions
04:00
When it comes to colors that you actually can take in to consider and use to your advantage if you want to but also remember that these meanings or emotion evoked may vary from culture to culture a Western pattern of association can look like this where pink is
04:23
interpreted as feminine and love and blue as peace and serenity But in addition to these kinds of patterns you can also keep in mind other things about colors like this Red is usually associated with warning or stop or danger
04:43
Because that actually is the first color that we as human perceive we perceive it the fastest So you can use that to attract focus to a buy now or a download button for instance And this actually also works with orange because that's really close to red in the color spectrum
05:04
But as I said sometimes it's interpreted differently So take China for instance red is associated with weddings and celebrations Ride-o-gowns are traditionally red
05:23
For birthdays weddings New Year's whatever gift You get envelopes like this with money and also in India. They have red saris They sometimes get married in so red is a prime example of regional and cultural impact of colors
05:46
There's also a problem of sorts when it comes to colors It's called simultaneous contrast it's when you have two colors next to each other and they they kind of
06:00
Well, we perceive them differently Regarding depending on what color is next to it. So to speak So if you look at those small squares here, they are all the exact same color Yet the left one looks darker This is simultaneous contrast and the same goes for let's say the garden
06:26
You have a field of red flowers next to a field of blue flowers where they meet The red flowers will look more orange and the blue flower they will look green We will come back to this a little bit later as well
06:44
There's a guy called Joe Halleck. He did a huge color survey He had participant from I think 22 different countries all over the world and they asked a lot of questions and one of them were
07:02
Could you describe cheap with colors and this is what they answered They also asked about favorite colors What do you think they the women answered anyone dare to take a guess?
07:21
Pink I would have said pink, but actually it's blue and And pink is actually here in the red zone, so apparently I'm rare The guys also had blue as the predominant favorite So both girls and boys
07:44
in all age categories had blue as their favorite and If we look at purple There were a lot of girls who answered purple as their favorite, but no guys and No one under 18 or over 70
08:02
Had purple as their favorite actually the 70 plus group They only had two favorite colors, and that's white and blue. I don't know why that is So it might be interesting to look at different demography
08:21
Genders age and such depending on what app you're doing And furthermore there are different ways to look at the color choice for your app Look what similar apps are using If we are doing an app in the range of social media
08:42
We do a search and we see that LinkedIn and Skype and Twitter etcetera. They're all blue So what you must consider is do you want to feel like one in the crowd? That you fit in Possibly even get some more credibility, then you should go with the most common color
09:05
or Would you rather stand out in the crowd? Then you should go an entirely different way Sometimes it's really good to stand out and sometimes it's not so you have to determine that from case to case a
09:25
Good base when it comes to color choices is to choose a base color a Darker color a lighter color and a contrast color If you do this you have a complete set or a color palette if you will
09:42
But do save it in a shared resource file like a CSS or something Because that will make it so much easier for you later When when perhaps you want to tweak your colors or something I Have a designer friend. He told me about Skype
10:02
Before they redesigned their app for all of the platforms They had over 90 different shades of blue in their app So try to avoid that You can get variation To your color scheme by adding a transparent overlay in increments of 10% either in white or black
10:24
And you can use this to add Visual hierarchy in your app and this is also perfect for hover Select mouse over and so on And it's a really good way to make sure you get variation in your app without
10:44
It looking like it's a clown who just designed it for you a good tool for colors is color dot adobe.com They you can create themes you can download themes from from other designers and
11:02
The you can search for themes and whatever and they have a really good tool they have lots of tools actually you can go in there and just pick a base color and They will suggest colors that goes with it. So you don't even have to do any work But if you want to you can another similar site is color lover calm
11:25
But you also get a sample image here most times so here I searched for pink and superheroes because who doesn't love pink and superheroes I Think it's neat Let me try something on you. I'm going to show you a color and
11:45
As soon as you know, which brand I'm talking about just shout it out. Okay. Are you ready? What brand is this? Huh? coca-cola exactly several of you They certainly succeeded with their color brand didn't they?
12:06
There it is. Let's try another one. This is a Swedish company Spotify yeah Spotify IKEA I think is red Spotify and some of you might have noticed that that was actually the old green
12:29
They changed the green just a tiny bit and the reaction were let's say mixed I'm deleting the app. The app is giving me anxiety
12:42
What is this weird green? So even a small Change in the shade of color get noticed So the bottom line is color is pretty important So it's worth thinking through
13:03
So don't use too many colors Make a palette you don't even have to use all of the colors But if you want to add colors later in the future you have them already Do add an overlay for color variation and please put it in a shared resource
13:26
Because it's easier for everyone you work with even if you're working alone Because then you don't end up with a lot of different colors everywhere Thinking about colors and choosing the right one can do a lot. I have an example actually
13:46
we have an LED shower head at home, so we just bought it installed it and I go and I'm ready to jump in the shower, so I turn on the water and it turns red
14:00
Well, I don't want to burn myself So I keep darling and it turns blue I don't want to shower in ice-cold water either So I keep dialing and it turns green and I jump in now usually Green means okay but this company they have decided that green is the color for ice-cold
14:25
I couldn't get out of the shower fast enough so color is important So we have the first piece of the puzzle Next piece is typeface
14:41
Now why should I care about typeface and what does this have to do with design? Well this is a good reason if no other The New York Times has made its typeface their entire brand
15:01
Let's try another thing. I will show you a text and as soon as you know what company this is raise your hand Okay, you ready? What company is this? Yeah, that's quick Although it didn't say Disney you all knew right?
15:23
Yeah, it's a W There's a lot of things I could talk about when it comes to typefaces Sizes colors weight space and of course the eternal question about sans serif versus serif
15:42
Most say that serif is for printed media and sans serif is for digital media Is that true? How is it today when when are we have retina and 4k screens? Is that still viable? Let's dig deeper into this and start with serif
16:02
Now serifs are the little lines that concludes the letter. It's one of the oldest modern typefaces we have It is used from everything from books and magazines to billboards and websites
16:21
serifs they are used to make your eye more easily flow over the words and Also to increase the contrast and spacing between the letters, so it's more recognizable The serif binds the words together in a coherent word blob or sorts
16:47
Which means that it actually can be faster to read according to display this array, sorry display readability studies Serifs can be really good to use in the body text because it's so
17:04
fast to read and it's less likely to cause fatigue and exertion and Sans means without, without serifs in this case Some things to consider when it comes to sans serif is that it's better
17:23
To use when it comes to small sizes as it retains their general shape because of its simplicity It's also better for children when it comes to learning how to read Because of its simple form it's more unrecognizable to them so which is better then?
17:46
Well that depends entirely on what you're using it for What feeling you want to convey what you're using it with etc? The fact is you can use both in the same project And it doesn't matter if it's for printed media or digital media
18:07
but in order not to leave typeface this open I have some additional tips and One is do not use too many fonts in your app or your website It becomes cluttered very easy, and the eyes actually get tired of
18:26
adapting all the time So use no more than three Actually use no more than two I would say then you can have one for headers and one for the body text
18:40
for instance and take advantage of headings and subheadings and bold and colors and even white space to emphasize what's most important This will make it easier for the user to find his or her way
19:01
And it will actually feel more harmonious and perhaps even faster font size is another thing you can think about and it's especially important when it comes to designing for the digital world and because in In the low-resolution screens, it's more difficult to read smaller fonts
19:26
so if you're debating between two fonts or two sizes Go with the bigger one a common type of alignment is justification It's when the spaces between the words are either compressed or enlarged
19:45
so you get a left side and the right side alignment and This can cause problem because there are so many devices and resolutions out there, so you don't know How the patterns are forming in the spacing and that can be distracting actually?
20:07
so try to use left alignment or center text and also instead of using all the effects at the same time like gradient and glow and
20:21
Drop shadows and what-have-you Try to tone it down a bit because it's way more effective if you use effect on a few occasions instead So the key takeaways from this section is Disregard the myths about typefaces and suns and suns serif
20:43
Use what feels right for you and for your app establish a good typographic hierarchy so it's easy for the users to find what they're looking for and Don't use too many fonts or colors
21:02
Or special effects actually so that's piece two in place The next step is to look at logos and this can actually be used as on icons as well for your app, so it doesn't have to be a logotype and
21:22
Making a logo doesn't have to be very difficult 9% of the top 100 most successful brand Don't have a name in their logo 41% only use text
21:43
So let's take a look at the process of creating a logo a Or a symbol if you will or a combination of these so what do we need to take into account?
22:02
Well first and foremost it should fit in with a brand or the app So don't go and use some fun font like comic sans or something if you're designing for let's say pharmacy That's not a good idea and the same applies to colors, but we already talked about those so you already know that
22:25
It should also work in printed and digital media Even if you only have like an online shop today perhaps in the future you want to get business cards or advertisement and stuff like that
22:43
And you also need a name Either the app or the product or whatever it can be And remember that this name should work everywhere. It should work on the web in apps and prints and so on And a good example of how not to name your app is to start it with I or
23:05
Metro or end it with droid There's a really cool Bluetooth gadget you can get it's a meat thermometer called I grill Really cool, but it the name implies that you can only use it with an iPhone
23:22
Sure, you can you can publish this for Windows Phone and there actually already is an app For it in the Android store But how thoughtful is that I? Who or me rather who don't use an iPhone I will feel left out
23:42
Users can take offense to these kinds of things because they know it's not designed for them and Today you might not have any plans to expand But if you choose such a platform specific name You're pretty boxed in so try to think about picking a neutral name
24:10
So to make a quick and easy logo you need icons, and I have a few really good resources. I can recommend Some fusion has an application called Metro Studio for it has over
24:24
6,000 Icons and this is a really good example of how not to name your app The now project comm is another Resource for these type of icons and all of these are in either flat or modern design
24:43
What whatever you want to call them so it actually works cross-platform And when it comes to colors apply the very same thing we just talked about Use suitable colors not too many etc
25:00
95% of the top 100 brand only use one or two colors in the logo 93% is simple enough to be recognizable by really small icons or images So think about how big your logo or icon is and if it can
25:26
Be created in a smaller size Facebook has solved this a really clever way they have one large But they also have the small one, and it doesn't even look the same And the smaller variation is very suitable for for the icon the app tile or even business cards and
25:50
If you don't want to do the design of the logo yourself there are an endless possibilities out there And this is one of them 99 designs They have Designers that can make logos for you they actually have over a million or close to a million designers at your service
26:07
So you don't have to do it yourself you don't want to But as I said to do your own logo doesn't have to be difficult a friend of mine Dave Crawford He's actually from around here somewhere
26:22
He works as a lead designer at Microsoft He has a really cool demo of doing a logo And with his permission, I'm going to show a short short version of that So we are going to do a logo for an airline So you already chosen a color palette and a typeface
26:46
So we go to the noun project calm and we search for airplane And we want that plane So we take all this and we add the name in the typeface and colors from our palette
27:00
We move the plane on top And we're done It doesn't have to be more complicated than this And I actually think this is kind of nice So use an inclusive name that works cross-platform
27:21
Tone down the number of colors and fonts and effects and Make sure you have the opportunity for both a large and a small version of your logo or icon and By now, I think we're close to the halfway point
27:42
We're almost at the party. I like cats But first let's look at images Some people say you should use Photographs others say you should never use photographs. I would say that they're both right actually
28:05
The right picture in the right place can lift any design any day But there are some things you should think about when it comes to photographs and images in digital design Pictures usually look their best on plane background
28:23
like black or white or gray The risk of using colors or gradients along with the pictures are what I mentioned before the simultaneous contrast On the left side we have a blue and a purple box and on the right side we have a purple box
28:43
But look what happens when we add color now it looks like we have one purple and two blue boxes and Me as a doctor who fan I know there's only room for one blue box, and that's the TARDIS right?
29:01
No, but seriously. It's it's a really good thing to consider using a neutral background And always make sure that your images can be scaled without becoming warped We've all seen the websites where all the people look like hobbits But hey we look very long and tall and slim here in the wedding picture, so who am I to complain?
29:30
usability should always come first Make sure that your photos have the right type of contrast for your app or your web page
29:42
There's a great risk that text and elements Can be difficult to read So if it's a bright image use a dark font or vice versa But that's all not always The solution is it some pictures are more complex than that
30:02
Then use a filter or a transparent overlay So now you can read the text without compromising the image using images of High quality That can actually determine your apps entire look
30:23
But also how professional your users think your app is So if you're going to do a recipe app and you take images with your mobile phone I Mean sure today's mobile phones have awesome cameras but it's not the same thing and
30:43
It's not always about megapixels either it's also about composition steadiness and everything else related to photography So use photographers use stock photos if necessary There will be a difference
31:04
It's usually better to not use any images at all than to use bad ones But it's also important to use relevant images This I'm sure you've seen examples of everywhere images that have nothing to do with the content
31:24
It doesn't matter if this is a really professional nice-looking image if it does doesn't have anything to do with it with this In this example, it says thank you for your email By the post-it note. I don't know how you guys write your email, but I don't write them on post-it notes
31:43
Not anymore So try to keep the image is relevant Size is also of great importance once it comes when it comes to images There have been some studies on this and one of them is for an auction site for
32:04
antiques They changed their product image from 250 to 350 pixels wide and that actually made the image Appear under the scroll line, which is usually a really bad thing
32:22
but despite that 63% more of the visitors click the bit button and a whooping 329 percent more actually put in a bit and Another example is for as a site for young people, so I wouldn't know anything about that
32:44
But they made their download button crazy big it take took up almost all the content with and This actually resulted in 139 percent more downloads with that said
33:01
Going with a huge image all the time isn't the best thing but it's interesting data an image can also be used as content itself Because it attracts attention much faster than text us So it can be used for
33:22
dividers for different information categories and such It can use it help the users to find the relevant information quick quicker So you will get the perceived speed for free And that's nice
33:41
But you might not have a bunch of relevant images laying around What do you do then? Well you go to stock photos The advantage of buying these is that you almost never have to wonder how you can use the images
34:01
The downside is of course that there's a million of them out there But that's also a good thing Because that means that it's possible to find very specific Images like a raccoon stealing food from a cat on the patio This image actually has over 20 keywords
34:24
The drawback is of course that it costs money but with that said Paid is not automatically better when it comes to quality There's a lot of free Images out there that really good of course. There's a billion. That's not that good so you need to browse through them all and
34:47
you also have to make sure to look at how you're You're permitted to use them And when it comes to stock photos there are a few things you should avoid and one of them is people
35:02
images of people also images that clearly Look like stock photos Try to avoid them Instead try to use images of real people perhaps people who works at your office or using your app or stuff like that
35:20
That will give you a much more elaborate and authentic feel This picture is from an eye tracking study We have a woman we have some text and we have a shampoo bottle here. You can see where the viewers looked
35:42
They looked some on the text, but and all on the models face, right? Then they went and tweaked the image just a tiny tiny bit They moved the eyes of the model, so it's looking towards the shampoo bottle And you can see the difference
36:01
The viewers are clearly following the gaze of the model towards the shampoo bottle so with this tiny adjustment We can influence the users and get that dramatic change in the patterns
36:20
So how you compose your image can have a huge impact on how the viewers direct his or hers attention? So Let's summarize this section Be sure that your images can scale proportionally Think your choice of images through are they relevant are they of good quality?
36:49
Do not use Okay images or have bad images if you can't get your hands on professional images Think about perhaps skipping them entirely
37:01
Make sure that you think about contrast and color contract color choices especially if you're want to put the text on top of images and That concludes images and we have all the pieces
37:22
for branding in its simplest form sometimes we make apps or web pages for other companies for instance and We don't get as much artistic freedom as we want. How do we tackle that?
37:43
Well the most important part is to read the documentation thoroughly It differs quite a bit from company to company what you can do and cannot do Take Twitter for example They have a lot of guidelines on how to use their logo
38:00
What colors it can have what colors it can't have what colors it can be next to even In a way, it's kind of boring because who wouldn't want a Twitter app that looked like Batman and This is actually Even more fun the font that Twitter is using is called Gotham
38:26
Coincidence It's really difficult to provide Specific tips on existing guidelines because the companies have such different rules
38:40
Some companies lets you do whatever you want and some of them don't even let you move a pixel So it's important and I can't stress this enough Read the documentation thoroughly and you're all set So now we have guidelines in place
39:01
your own and existing ones But there are another set of guidelines that you should take into considerations Namely platform specific guidelines Even if you have a clear branding you might need adjusting
39:20
Depending on what platform you're publishing Microsoft has Microsoft design language Apple has human interface and Google has material design guidelines That can help you when you are designing your app for that specific platform all three actually agree on
39:44
Surprisingly a lot of things when it comes to design But don't design for one platform and compile it for all three Instead you should take advantage of different platform strengths
40:00
For example Don't put a back button in the UI on an Android or a Windows phone You should only do that on an iPhone Because that's the only of the three that doesn't have a hardware back button Copy the design for the platform design guidelines or rules if you want
40:26
If you want to blend in like a utility and feel part of the platform
40:45
When it comes to devices there are an endless number of sizes and resolutions out there and It's almost impossible to design for each and every one of them
41:01
So to solve that problem we can divide everything into larger groups. I Find it easiest to do so in three or four groups So we have the small portrait view or phone experience We have the tablet experience and the laptop experience
41:21
Both starting in landscape, and this isn't written in stone or anything, but if we think like this We can reach up to 95 percent of the devices out there That's kind of cool And if you're designing for huge screens like Chromecast or surface hub or Xbox
41:45
Then you should add a fourth group so you can catch those as well So we simply change the UI Depending on the width and orientation and this is familiar for those of you who has worked with responsive web design before a
42:06
Common question is should I start designing for a large screen or a small screen? well You are more constrained when it when on a smaller screen size So if you start there you will get all the complex issues out of the way
42:24
And you will get more leeway and options as you work your way up to larger screens. I usually start with a 5-inch phone Then I test it at 4-inch and 6-inch and if something is off on those two
42:40
I go back to the 5-inch and I What's it called? I tweak it there and when I'm satisfied with how it looks I Check how it looks at 8-inch and Then again at 13-inch where I assume that laptops are starting and the thought here isn't to do three
43:09
Completely designed to completely different designs, but one general With tweaks depending on size and orientation So how do we go about that?
43:24
When it comes to creating a UI that will flow nicely across all the devices We can utilize six responsive and adaptive design techniques. We can utilize the six R's We have resize
43:41
reflow reposition reveal re-architect and replace So for resize we simply change the size of the frame and that the content Adjust accordingly for reflow
44:03
We can change the flow of the UI elements depending on the device size and orientation So for example, we can add a column and even make it wider So it's easier to read a bunch of text And we have reposition
44:22
You alter the position of the UI elements. So if we have an app with two large chunk sections for instance Then on a small portrait view we put them on top of each other and then on a larger screen we put them By the side of each other and then we have a reveal
44:45
show additional content if the size allows you to Add a map to your app or Show more content about the item you're showing But you can also use this for device specific
45:03
functionality like a camera button perhaps you don't you only want to show that on a phone but not on a stationary PC Then you can use this and then we have reveal. No, we have a re-architect
45:23
So we have a master detail view So on the small screen the user will navigate from master to detail But if we have the screen in real estate you can show them side by side at the same time and then we have replace
45:44
and This lets you replace the user interface for a specific size or orientation In this case, we replace the nav bar or hamburger menu if you will With a pivot or tabbed navigation. So take time to plan out your app
46:04
Should you reflow or perhaps the optimal design choice for you is to re-architect Another thing to think about when is how the users will navigate your app
46:22
Will they use the menu often? What size screen are they on? Do you want to enable? one-handed navigation like for a phone navigation controls Helps the user to get the information they want, but it can also take up unnecessary
46:43
Space that you could have used for content So if you choose wisely The user will get the information they want faster and you will get perceived speed in your app Speaking of perceived speed it's always a good idea to use transitions and animations in your apps
47:07
Make sure that they are They are the same as they use on the platform. So they fit in on the platforms respectively Use transitions when you're switching pages
47:22
Animate objects don't just let them suddenly appear like that and Also, if the user interacts with something in your in your app act on it instantly Show a progress bar Load a placeholder until the actual content is ready. Most users today have more than one device and
47:51
most if not all have touch screens so also keep in mind that you're designing for touch and
48:03
That means we also need to consider Ergonomy so the best place to put interactive elements is where the users easily can reach them in this case It's the lighter parts So you can take advantage of a hamburger menu menu for instance because that's not in the way
48:24
But make sure you only put non essential items there because as you can see it's kind of hard to reach When it comes to reading area, it's almost completely the opposite
48:42
You should put your content in the upper area where you don't block the text with your hands and if you want to see more of Some of the things I've mentioned today Here are some resources and here are a few more and don't worry. I will tweet a link to this afterwards
49:07
and Before I summarize do we have any questions? Awesome, then I did a good job
49:21
You have a question So the question is which platform do I think is best regarding design guidelines when it comes to either Windows Phone
49:42
Android or iPhone Actually, I think all three I would say don't use just one set of rules Because then the Windows Phone users if you were designing for iPhone if you use their rules or guidelines rather if
50:03
you publish that in The Microsoft Store or the Windows Store you will probably have Back button in the UI and then I will instantly know that this app Or rather this developer is kind of lazy because he did he compiled once and published it everywhere
50:24
So I would say use You can you can start with using one of them You know Whatever platform actually and then you go and look if you want to publish it for Android You go look at their rules. You just skim through or am I doing something wrong? Okay, I shouldn't have the back button
50:44
So you remove it and then you publish it there and you do that for all three platforms Does that answer your question? Awesome. Yeah
51:03
So the question is is there a difference between designing an app or a web app? And I would say no, I think you can get away with designing Once because today like like we talked about Android on Windows Phone and Google and all that
51:23
Google and Android iPhone They are on the same page for about what 80 90 percent of the design guidelines and that's also viable for web I Would say yeah same principles
51:44
Yeah, okay. So the question is
52:28
as a designer should you care about how many pages should or rather should you use many pages or should you use scrolling I Would say it depends entirely on what kind of app you're having if it's
52:43
Let's say Cute kitten video app then then it's okay to have a massive row of scrolling I would say but if it's a Master detail thing that you you click your way in and you want to read about you want to read this blog post
53:01
Then I would say perhaps you should divide it. So you have one blog post on each side So I think you have to really think about what is it that my app is good at
54:06
Okay, so the question is if We for instance look at the blog and we have a lot a list of blog post we can either click click it and go to a detail page and Then navigate back and click another one and so on or we can click it and it expands
54:23
So we only have one page I haven't seen any statistics on this and I think it's it's a Artistic choice here I really like the ones where you click and it expands because then I don't have to navigate back and forth
54:43
But if it's a lot of text to read perhaps you should actually have it on another page Does that answer your question? Awesome any other questions, so let's come back to what I said in the beginning
55:04
The user will just the quality of your app based on how it looks So think through what you are designing Take your time to create a brand or at least a color palette so you can keep consistency throughout
55:22
Try to keep everything clean and relevant Don't use too many typefaces or Effects and think about what images you are using and what backgrounds you're using it with And make sure it's readable for everyone
55:41
Take a moment to think through the navigation and flow in your app to optimize the choice of layout so now You've got the resources to create a well-thought-out UI. So when your users are like this and
56:01
You follow these tips and tricks you shall pass that first user test. Thank you