 So I'm really excited about this session, and I think a lot of people are excited about it too. And the reason is because I really believe that design is something that we can learn. A lot of people are intimidated by it, and if you're kind of an engineering type, you're kind of not used to dealing with visual stuff, and it feels very, like, mushy. You know, it's not clear. Like, what are the rules? The fact is that there are rules for a lot of these design concepts. They're not just arbitrary. They actually can be measured. And so that's one of the things I wanted to convey to you today, is that there are ways of approaching design from a mathematical rule-based way. And it's a lot like cooking. So if you were at my session yesterday, then you know that I like to use a metaphor when I'm talking about design and giving presentations because I find that it helps us to understand the concepts better. So you could go to a fine restaurant and have a meal prepared by a gourmet cook who has gone to chef school and has a Michelin-starred, you know, restaurant. But you're not going to make that at home, right? You don't have that level of training. But that doesn't mean that it's not worthwhile to actually learn how to cook and how to prepare a meal. When you're first starting, you know, you take out the recipe book and you read the instructions and you do them very carefully and you just go by what you're told until, you know, you get some experience and then you start maybe changing the proportions or adding spices that you like or putting your own spin on it. So that's what I'm hoping that you'll get from this today is the idea that there's some rules that you can follow. And these aren't always like 100% hard and fast rules, but they're starting points. So there's a way for you guys to learn some of the concepts by starting off and in the beginning you'll just be doing it a little bit by rote. Maybe you can download the PDF and actually, you know, take some of the rules and try them on your own solutions when you leave here today. A little bit about me. I'm from Toronto, Canada. And yes, there is a country to the north of the U.S. and that's where I'm from. We're on the north shore of Lake Ontario. And the Toronto is actually a really wonderful city. It started off as a sort of a little, it used to be called Muddy York. It was just really kind of in the middle of nowhere. But over the course of a couple hundred years it grew up and in the Victorian era we were one of the largest distilleries. We had one of the largest distilleries. So like all good metropolises built on the sales of alcohol. And this is a distillery district now. It's all been converted. It used to be all warehouses, cobblestone streets. It was actually the Gooderman Works factory for there and the distilleries. So it's a collection of about 20 or so buildings with lots of shops, restaurants, theater. It's a fantastic little area. So I'd just like to plug Toronto a little bit when I have my presentations because not everybody knows about it. So I'm a musician. I play the cello and I have a degree in performance from the University of Toronto many years ago now. And I volunteer actually with the Mississauga Symphony. We play symphony concerts throughout the year. And this is a really cool event we did this year which was a Star Wars concert. And as you can see we had a cosplaying team come out and be Star Wars. And I promise you I actually am in this picture. I'm right there. Oh, thank you. So these are my kids. I have a tradition of showing embarrassing photos of my children because they don't really like their photo taken. I probably had a better picture, but I just chose this one because I thought, you know, it would be fun. My oldest is almost 17 and 14 and my daughter's 11. So it's pretty fun to be their mom. I'm the founder of the blog DesigningFoundMaker.com. Some of you may know it. Please subscribe if you don't know it. I specialize in visual articles for visual design for FoundMaker developers. And as I mentioned yesterday, and I'll repeat it today, I haven't been publishing a lot because I've been working really hard on a couple of initiatives that I'm just launching here at DevCon. The first is I filmed a web series on visual design. So short one to two minute videos to give you some tidbits about design. And the second is actually a new online school called FMDesignUniversity.com. So the course I have is a design course. The presentation yesterday was kind of a highlights of the full course, the little bits from the whole course. You can get a 20% discount if you're interested in the course. There's a code DevCon 2016. So please sign up. There isn't any content. You can read about the course in this curriculum. I have everything, you know, 80% prepared, but I had to switch to working on my presentation. So there's still some work to be done. So it'll be coming in the fall. But please stay tuned and at least subscribe so that you'll get notified when it goes live. So one of the things that design is, and there's a number of things that we could define it, it's the process of dividing up the space. And when we divide up the space, we can see that there are rules that we can use to actually guide us in how we actually do that. And when we use mathematical rules, it helps us produce a result that we can count on because those rules are going to be applied the same way every time. So I'm hoping that you'll be able to take these rules and then apply them to your own work. And maybe even something you can take that you've already designed that already exists and you can revise it. So today we're going to talk about some elements of design. And I just want to call out the little animation because if you came to my session last year, you know I had, I was very proud of my little car that traveled along the road. So this is my new animation for this year and I really like how, I'm just going to show it again, how the knife just chops and it just like suddenly in three pieces. Wait for it. There it is. So elements of design. Next up we'll talk about some basic techniques that you can use in your designs. Some practical methods that are actually in FileMaker that will help you that are math based. And finally some presentation methods, some rules that will help you in terms of presenting your actual data. Alright so let's get started. This is really, really simple. I'm just going to talk for a moment about symmetry. Probably a concept you all learned in grade three math but I think it's really important because in design we do have the element of symmetry so at its basic half and a half you have a whole, right? Everybody understands that. And in something that's symmetrical you're just dividing it right down the middle and you get something that's equal on both sides. And you have balance between both of those sides, right? Like each side is perfectly balanced with the other side. And if something is not symmetrical, does that feel good to everybody? Do you like that off in the corner there? Do you understand why I put it there? It doesn't really kind of make any sense but if I move it to the middle, does everybody go ah? Feels better, right? Now this is also symmetry because we have a shape directly in the middle of the screen but if you look inside the shape you'll see that the two halves are not actually identical to one another. So this is the element of design that comes in. We have symmetry but we also have variation within that symmetry. It's not exact symmetry because if we look at a lot of exact symmetry we actually kind of get bored and we understand it and then we kind of stop paying attention. So as designers we want to invoke symmetry but not be slaves to it and not be using it, you know, okay everything has to be symmetrical now and that's also not how the data works. You're never going to make a layout probably that's exactly symmetrical. But we want to make sure that if we do have a group it's in the middle that we're not just sort of moving things around or we're not paying attention to how they're organized we want overall symmetry for the layout. So I just took, I made a little demo for this session and I just threw everything up there and I hope you guys see that it is symmetrical. You can all see that, yes? See some nods? And then I fixed it. And we all feel that that looks a lot better. I hope we feel that. For me for sure I like the way that everything is grouped together and it feels clean and it feels understandable it feels like there was some thought put into the design. So we are drawn to symmetry, we need symmetry but we can't do too much symmetry because it ends up being uninteresting and we do want our layouts to have some interest to them. So you're trying to find the balance between symmetry and asymmetry. So next we're going to talk about pattern. Humans are pattern recognition machines that's just what our brains do. We see patterns everywhere we even see patterns where there are no patterns you know the constellations in the sky like there is no actual you know organization to them but we looked up and we saw that we could connect the dots and make shapes and name them and do all those sorts of things. So we're very very very good at creating patterns and patterns are important because they help us learn. So I chose the Fibonacci sequence a very famous sequence as an example of a pattern to show you and I'm not sure everybody is familiar with Fibonacci he's an old Italian guy who came up with this sequence and it looks intimidating and some of the formulas I showed you today look a little bit intimidating on the screen but a lot of times you don't actually need the math to show you so that you know the mathematical basis of it it doesn't mean you necessarily have to compute it every time. So in this one all it's saying essentially as you take a number and then you start with zero and then you take the next number which is one and you add it to zero and then you get one you add one and one and you get two and so on and so forth and why is this interesting or important? It's because as you go higher and higher and higher in the sequence the numbers actually start to get closer and closer the proportion between them gets closer and closer to 1.618 and that's just a fact that's just a facet of the way that the numbers work and it's really cool and we see this actually in nature so the Fibonacci series appears a lot in the ways say that leaves would grow in a branch in a spiral or a pine cone I don't know what they're called but the little bits of the pine cone actually form spirals and this is really a practical application or practical reason why this comes about and I find it's really fascinating I don't know if everybody else loves the Fibonacci sequence as much as I do but if you're interested there's some really cool videos from ViHeart about the Fibonacci sequence in nature and so the reason that it's important for us as designers is because we are on a subconscious level we're presented with the Fibonacci sequence all the time we see it everywhere there's arguably in the proportions of the human body so this ratio 1.618 because it's all around us we are attuned to it and without even really realizing it so we tend to really like things that kind of conform to that proportion and I'll talk a little bit about the golden ratio later so those, sorry these ferns you can see in the spiral actually forms the Fibonacci spiral those are also known as fiddleheads and they're delicious just to continue with my food metaphor so pattern I'm showing you an example of pattern and also symmetry and asymmetry, right? so we have a pattern that's repeating we have these five bands of color but they're different so there's some interest there so it's not a pattern that's repeated over and over and over and over and over and we go okay we got it we see the pattern so this is important for learning because once we see a pattern and when we learn it, then we learn to expect it so when we see something like a button bar we say oh okay, that's a pattern we see 1, we see 2, we see 3 that means we can add 4, we can add 5 and we can add 6 and becomes a pattern we don't have to reteach what the purpose is of that particular object every time we show it so we really are going to use pattern to reinforce the learning of the UI for the users because people are so good at it anyway we might as well use that to our advantage and when there's repetition people get to know what that does and they're like oh okay and they feel a sense of trust they feel a sense of safety and they think you're a great designer because they're like oh that person knew exactly where to put that it was awesome but if you repeat it, repeat it, repeat it, repeat it it's boring so we need a little bit of variation so you kind of have to know a little bit enough is enough but you almost, you know the too much, it takes a lot to be too much so don't worry too much about that for now use patterns to your advantage and your designing is my advice so we talked a bit about the golden ratio and we talked about 5, 1.618 and has anybody heard about the golden ratio before, are people familiar with this? oh so quite a few people, so that's good awesome, the golden ratio is great people understand humans as a species understand information presented in a rectangle better than in any other shape doesn't have to be a golden rectangle just any rectangle but you notice we have rectangular screens television screens we have rectangular computer screens iPad screens, iPhone screens we have rectangular books before any computers we had books in a rectangle books are not circular, they're not triangular we understand that in a block really well and the golden ratio before as I said because we're subconsciously seeing the golden ratio quite a bit in the natural world we tend to really like rectangles that are golden ratio that have sides that conform so the long side is exactly 1.618 greater than the short side and a golden rectangle in particular is if you divide one into a square and a rectangle you can keep dividing it into another square and another rectangle and so on and so forth and if you draw a line through the, whoops, I'm sorry through the corners and mess that up if you draw a line through the corners of all of those rectangles you'll see that it forms what's a Fibonacci spiral the same spiral we saw with the ferns we'll look at it again just because it's cool to watch that line draw itself so if we take away the photo we see actually a large square and a rectangle does anybody recognize this pattern from any applications that they use? yeah, it's very common right? we have like parent and child or master detail or you know something important and something explanatory and actually the demo that I just showed I did it as a golden rectangle and it feels good it feels like they're in the right proportion like the left side is skinny but not too skinny, you don't feel like the information's crunched and there's enough space on the right side to actually show what you need to show I'm not saying you have to use a golden rectangle all the time I'm just showing you how you could use it and how it makes for a really nice nicely proportioned layout so the main thing that the golden rectangle does in addition to this nice proportion is it breaks up what we saw with that direct symmetry by cutting something directly in half I've actually done layouts on occasion that are directly in the middle and they feel kind of strange I think it works in certain circumstances when we have like maybe in the import dialog box where we've got like two absolutely equivalent things but that's a special case I think for a normal layout it's very unsettling to have something that is exactly divided in the middle and you're doing left and right so when we use something where they're slightly different sizes the golden ratio actually helps us quite a bit and as we saw it serves the basis of this common pattern and it's not the only way I'll show you rule of thirds later it's another way of dividing it so now we'll talk about some basic techniques and I just mentioned rule of thirds I was ahead of myself and rule of thirds is something we see a lot in photography and it's just taking the total width of your let's say image and dividing it in three and you can divide it in three both horizontally and vertically so if you take this image and we I put some measurements on there and we actually divide it up you can see that the focal points pretty much line up with where the lines line up with each other almost every camera has actually a rule of thirds grid you can show or hide and it helps you to compose your picture a little bit more nicely have you noticed that sometimes if you put something dead in the middle it's the same thing we're talking about symmetry when your subject is right in the middle it feels like meh but then you just move them off to the side and you're like oh that feels good that's a focal point one of those focal points and we really respond to that we just think that looks better so how does this apply to software design? well what it means is that the most important stuff that we're going to show the user should really be in that top and the left part of the layout and that's because in the western world we read left to right and top to bottom so we want to make sure that when you're designing your layout you actually use those zones does anybody think that we might want to put like something really unimportant like I don't know try to think of a the step one rather than identifying what it was but step one at the top it would feel odd because we don't know what we're looking at yet so we want to have all that identifying information right at the top the identifying of the actual solution the button bar, the main navigation and along the side we have all of the sort of identifying information for what is this solution about so we can see it at a glance question? I believe so I have personally not done any designs the question was does the opposite apply for languages that read in the opposite direction and I believe the answer is that it does although I personally don't have any experience but yes I think it's all just reversed we don't tend to we think that we start right at the very left but when they do eye tracking studies they actually see that we don't start at the very very left most part of the layout we come in somewhere here that's what we look at first and then we kind of move around and read what's in that quadrant at the top and then we go across to number two and then we go down to three and across and then we kind of go down so it's sometimes called the Z pattern if you were in Yan's session yesterday he talked a little bit about this a Z pattern or an F pattern that happens and they've actually studied this this is pretty much been proven over and over again by actually tracking people's eyes when they look at images and layouts so rule of thirds we're dividing it horizontally and vertically and we're using that to our advantage to find the natural focal points of where people are going to look first and we're going to put that important information in that spot we're going to use it and we're going to leverage that top especially that top left focal point you want to be able to identify what this is about very quickly and by putting it in that area that's what you'll do okay grids so there was a whole session on grids yesterday so I'm not going to go that in depth with grids I'm just going to give you a bit of a taste now this is one where you would use the actual formula I encourage you to plug some numbers in it's fairly straightforward but it's a little tricky because you have margins left and right but also between columns so it's not like you have three columns and three margins there's extra margins on the sides so this formula will help you and I did it with this particular set of numbers I chose a margin of 20 points I find that's usually pretty good given the sizes of fonts that we typically use 20 points is a good rule of thumb you don't have to use 20 points you can use 25, you can use 15 you can use whatever you want but if you don't know what to use I would say try 20 and see what happens so if we have three columns we get each column is 315 now I broke this down also you can see in the blue rectangles that very similar to the golden ratio there's a slightly thinner when you divide it by rule of thirds which is what I actually did by saying I wanted three columns you get a slightly skinnier left hand rectangle and then a slightly wider well it's not a square anymore it's a rectangular area but the larger area is a little bit wider than you get in the golden ratio but it's quite close so when you have a grid when you turn the grid on in FileMaker this is what you get I'm talking about something slightly different there can be sometimes some confusion about designing with a grid and the actual grid feature in FileMaker you can't support one another but there are slightly different concepts so designing with a grid really is about understanding that you're lining things up along the imaginary grid and that you may be combining as you saw before I had three columns but maybe I don't necessarily need to have a layout that is exactly three columns I'll have one and two but then on something different maybe I'll have to have two and one or I can divide them up in different ways there's a 12 column grid which gives you lots of variation if you can do three and four or four and three or you can do short and long but the idea is that there's this underlying invisible structure behind the actual design itself that you use to leverage there's also the grid feature in FileMaker which we can turn on and what we hope is that those two things but you have to be aware of actually making that happen so you can actually turn it if you turn it on you'll see that you can do a major grid spacing and a minor grid spacing and I would recommend you do a major grid spacing of 60 points and you have six minor grid steps what that gives you is each faint line which I don't think shows up very well here on the monitor but I've seen in the slides you'll see it that means that each little square is 10 points and that's really easy mathematically to work with because we're working with round numbers 60 also happens to be a multiple of 12 right so you could also do you could change it and use a multiple of 12 if you're more familiar with that because 12, 24, 36 and also the point sizes tend to be based on 12 and I'll tell you why later so you can start there turn the grid on now you'll notice though because our screen size is not exactly a multiple of 60 it's 10, 24 the major lines don't line up quite on the right hand side so the grid starts off really good on the left but then because we chose three columns we have 315 which doesn't divide so evenly but that's okay don't worry you can use little 20 point sorry this one here is 315, I'm just showing you that it's selected and it may be I'm sorry I got mixed except with my other slide when you select an object it will tell you how big it is and those little blue ones are 20 points I'm getting a little ahead of myself but the idea is that you can select objects and use that palette really to help you figure out the sizing so you're going to use the grid to help you create your columns for a grid to help you figure out how to manipulate those objects whether they're lined up and what that does is when you're doing your first layout you're going to make some decisions about it and then you're probably going to do your other layouts later and if you use the same grid for everything that means they're going to coordinate with one another and they're going to look like they belong together so it's a really great way to help you build out your design decisions throughout the whole system so consistency is really really important because it helps support learning ratio and proportion so this is a little hard to find a formula but I'm going to just use a formula that's essentially a recommendation so the idea between ratio and proportion is that size differences imply a difference in importance in the information and when we are designing we want to establish what we're calling a hierarchy which will match the hierarchy of the actual data itself so the parent objects generally speaking you're going to want those to be bigger maybe they're not parents but maybe they're sort of more general so in our case we had a recipe name we're going to say that the title text size is going to be two times whatever you use for the field text size again this is not a hard and fast rule you can play with it but I would suggest this is a good starting point because it means that your main dish is going to be bigger than the rest of the meal and there's going to be an obvious difference between the thing that's the most important and the other side dishes so here we look at the recipe name and that's 24 points versus the other stuff which is 12 or if it was 16 or whatever combination you wanted to have that means there's a big enough difference that we can actually perceive that there's a size difference and then that implies a hierarchical difference and that's going to convey that this is spaghetti bolognese we see it right away and I'm going to Bologna in October so I love spaghetti bolognese so we're going to use the ratio and proportion to communicate your hierarchy you can try different proportions if you like what you find works but there should be a big enough difference that it's obvious otherwise we just left wondering why are they different and remember that larger items we perceive we interpret them as users to be more important than smaller ones and again make the size difference big enough to be noticeable okay some methods I like that steam white space so I may have heard the term before it refers to the space is not filled with stuff, with objects so you can't have an object exist in space without the space around it and the reason white space is important is because it allows us to actually understand what that object is better if everything is crunched together it's difficult to pick out what is the thing and how important is it so I'm going to suggest in terms of margins and space between objects between columns that your minimum white space is going to be whatever your minor grid step is but two of those so in our example we said our minor grid step was 10 points so we had a 60 was our major grid step for 10 points we're going to use 20 points and that's what I used in this actual demo so when we have everything crunched and there's no space it's like a messy kitchen it's really hard to get around and to understand what you're going to do and to do things in an orderly fashion because we're just busy looking through everything and seeing what we need but when it's orderly and we have space for everything it's much easier to understand right so here I used 20 points you can see across the top the sides it's a little bit wider on the bottom but pretty much everywhere it's 10 points 20 points I'm sorry as evenly as possible again just a rule of thumb start there see what you like different screen sizes you might need to adjust but give it a try white space is super super super important because I think I see maybe as a weakness most often is not enough white space and that compromises the user's ability to really interpret the layout we really do need that space around oh I'm sorry so that's just what the layout looks like in layout mode and the boxes are showing you so this is a little trick you can create your 20 point boxes and put them there for you and you can anchor to them make them a different color you can see there's hide object when on there so that when I'm in browse mode they don't show up you don't have to keep them there forever you can delete them after you're done or drag them off to the side you just need one really and then you can just copy it and move it to where you want Yann yesterday suggested using a button bar with segments of a certain size so use these to help you you don't have to eyeball it and we have the snap to guides which works quite well as long as we know what we're snapping to so that's a little trick you can use to kind of help you arrange your white space evenly make sure that it's the same width everywhere so when everything is crowded together and thrown in the layout it's difficult to read, difficult to understand and remember before I talked about that sense of safety and the sense of oh it just looks right white space will give you that it'll build trust with your users they'll feel like oh yes they know what's important and now I know what's important and because that's when we have large text stuff around it we know that's the most important thing we focus on so position, sorry about that so position is the coordinate system I'm sure we're all familiar with coordinates just simple x, y but it's really a useful thing it allows us to measure what we're what the objects are on our layout and when we measure it we don't have to guess are these the same width, are they in the same place are you familiar with the term pixel shift you know when you'd go from layout to layout and then you have something that's supposed to be fixed like a navigation and it just moves like a little bit our visual system is really really attuned to movement you can see the slightest little movement I could be standing here completely motionless but if I go like this I'll see that I'm waving my hand very easily so even a little blink like that cursor, you think about the size of the cursor on the screen it's really really small but because it's blinking we can hone in on it so pixel shift works the same way when we go from layout to layout and something that's fixed just jumps by one or two pixels you'll see that but if you use the position palette you can actually go to your layout and check and I do this all the time I keep a pad by my mouse and I just write down the coordinates of things and I go through and check are they all in the same spot so this one is 20 points I showed you this already so you can see that position left right top bottom those are really really handy coordinates and you can change the size by just typing right in there I've been working in keynote a lot and actually keynote doesn't give you this much information you can't, it just gives you one and then I can't remember exactly how it's done but it's not as much information as FileMaker is giving us and it's not as easy to manipulate the sizes so this is really really handy all the time so when you use that position palette and I don't know if everybody knows this but you can bring up more than one spectra palette inside FileMaker and so you can have one on position if you're using it a lot and then bring up another one and show something else and that's really handy when you're working because you don't have to constantly keep switching between different palettes if you have a small screen it's a little harder because then you know you run out of space but it's a really great little trick to be able to be able to move things and actually do other stuff at the same time check themes or whatever styles and you can move the objects really precisely using that little palette so resizing objects so this, if you have a number of a button bar and it's a total it has some length if you have three if you divide it by the number of segments you'll get the size of the segment and why am I telling you this? because the button bar does not like other objects when I was expecting that when you add a segment it will increase the button bar by the size of the segment does anybody else feel that they felt that it was going to, how it was going to be? but what happens is that it actually it keeps the total length the same and you now get four segments that are smaller than what you had before but I actually want my segments to be all that size because I need that white space around the edge of the button that's what I like, that's what I want to keep but what you realize is there's a little tool tip that comes up when you drag the handle of the button bar and you actually, you can't just click on it you actually have to drag it a little bit which is a bit of a pain but if you're careful you can see, alright that segment is 127 points but you can also just take the total length from the position and just divide it by the number of segments you have and then you write down how many it is and you add it to the total and then your button bar will expand so this is what happens when you add it it just kind of crunches in you can't see that button, there's a text on it at all but if I add it on you've got now four equally size buttons there's just a way to use the math so that you're not just dragging and eyeballing because maybe you have ten other layouts that have that same button bar with segments of that size and you don't want to make them all look different right, you want to keep to preserve that size so just a little trick to to do that so the resizing and the position work together so that you can manipulate the objects more easily so that you can be more consistent from layout to layout and we're going to support the user by being consistent and help them to learn your app and think that you're a great designer and help you with your development because you're taking the guesswork out of how big should it be it's a simple calculation okay, some presentation methods take the steam on my turkey it's going to just side to side so I'm not sure if everybody knows what letting is but it comes... it's a term that comes for the days where actually people would set type so actual metal type they would type set newspapers and books and other publicated material or published material, sorry and the point size actually does have a correlation to inches and this is what they were using at the time so one point is actually one seventy second an inch and the letting was actually the amount of space it was just a piece... it's called letting because there's a blank piece of lead that would be below the letters and it would separate the lines from one another and in the electronic era we can actually play with that letting it may be called line space now the letting is the technical term I guess and what I find one of my little pet peeves it's not a big thing to me and I think subconsciously to the users is that the default line spacing is quite tight so if you just to put a text box and you choose a font size and you throw it in the layout file maker doesn't give you a lot of letting it gives you a little bit but not that much and I've noticed something really interesting and I haven't checked this in other versions of file maker but if you go to the palette and you select a field and you look at the line spacing and it says one point you'll get this but if you switch it... sorry if it says one line if you switch it to points the units to points it actually gives you 16 and it changes and it makes it bigger so that was kind of an odd behavior which I hadn't seen before because I was going to tell you you know use 16 instead of 1 so all you need to do really is change the units on it so this is what you get by default and it doesn't look bad but to me it feels like especially with large amounts of text the portal is pretty good because the portal has lines dividing it so there's already a little extra space built in when you add fields to a portal but the fields when you put them on top of each other especially when you make a group there's lots of space but everything's kind of crunched together so I'm going to show you you'll have to look carefully to see the shift there it is it was very very subtle right but do you want me to do it again back and just a little bit more it's a small detail but I think it can add a lot you don't use up a ton of space doing this but you just enhance the readability just makes it that much easier to hold the user's hand along the way will help you that's because people have limited brain power everyone's brain power is limited there's an awful lot of stimulation I think I heard recently that we absorb five times the information today that we did even 10 years ago coming at us from all different advertising articles on the web social media we're absorbing absorbing absorbing all the time that means that even just the average person is kind of they're tired they have short attention spans and if they're using an app that you've created often it's for their work they're trying to get something accomplished they're trying to get something done so even these little things that help them that enable them to understand more easily to process and to reduce the amount of work and decision making that they're asked to do will help you because you know what, in your app at some point they're going to get a critical decision yes, no, do you want to delete this record you want them to have the brain power to make the right decision at that point and not have worn it down by the time they get there by all these little like death by a thousand cuts so what I tend to do is I tend to put it either 1.1, 1.2 if it's a block of text increase the field borders by a little bit and then use that one as your template to or you can select your field and just change all of the sizes I love the new the automatic locking of objects because it makes it way easier to make sure that things are aligned so be generous with the line height and the letting or otherwise someone's letting ok, so Fitzla so Fitz was a psychologist and this is you know the description of his law but you don't really need to know this there's, it's a whole lot of of stuff, I'm not going to test you on this actual math and in fact you need to do some testing and figure out what the average times would be anyway so we're not going to do all that but the concept is really sound and essentially says it boils down to in a practical sense that buttons that are larger and are closer to where the user already is, say their mouse is easier to hit than something that is smaller and or farther away so it takes more time so the law says that the more distance you have to travel the harder it is to be accurate with actually hitting a target so it applies on both desktop and mobile in mobile you have a finger which is actually larger than you can be a lot less accurate with your finger than you can with a mouse pointer so you have to be even a little bit more conscious of this on mobile and allowing the targets to be easy to hit but even on desktop what we want to do is something especially that we're using all the time we want to make it easier just like if we sit down to dinner we have our knife and our fork really close at hand right we could put them in when we go camping we have a little jug and we just put all the knives and forks in the middle and that works but it takes more time to pull them out and bring them over to where you're going to use them and as we just talked about we want to make it easier we want to reduce that friction so something that's being used all the time you can put it right up front at top and make it fairly wide and generous easy to hit there's a pop over on the bottom in the bottom left corner there's a little camera and a link those are pop overs too but when I design the system I thought well we don't really need to see the photo of this all that often it'll probably just be there when we print it out but browsing recipes that's going to happen all the time so we want that to be close it's also if we're doing things in context sometimes rather than making the user travel all the way to the top right or left we're going to provide them a button in context so it's close to where they actually will be making their decision maybe it's like an edit button that edit button isn't going to be somewhere disconnected from what they're editing that will make it easier for them to hit and use it more accurately so whenever you can try providing the buttons taking action in context and buttons are so important because in FileMaker it's not just often about presenting data it's about actually getting information back from the user and allowing them to take action in some way so partly it could be getting information from them so you're presenting them with a button so that they can actually put something in or you're asking them to actually do something or providing them with a feature maybe it's a print button or create project or whatever that is so Hick it was also a psychologist who were in the same era for the first half of the 20th century and he had also a very obscure mathematical formula that applies to interface design you don't need to also know this formula but it talks about how long does it take someone to make choice out of a list of choices and sometimes we have quite a lot of choices available to us so what that tells us is that the time required to make that decision increases logarithmically as the number of choices increase so that means if there's two decisions it might take a certain amount of time but if there's ten decisions it might take logarithmically it's a geometric it doesn't just take ten times as long it takes much longer but if somebody has a really long list of stuff that can add up like let's say you go to Amazon and you're presented with an alphabetical list of every book that Amazon has so they've done that by giving us a search button so we can zero in and we still might have to look through a list of stuff right what we can do to help what Amazon in fact does and what a lot of us as designers would be doing is providing categories like a menu can you imagine if you went to the restaurant and they just give you an alphabetical list of every dish they had and expect you to order like that you know you'd be like ok I want apple pie because that's at the top of the list so we're going to use categories so alphabetical is actually a valid way of categorizing but probably you're going to have some natural groupings within your data so within the food we've got main dishes starters, sides, desserts whatever field you happen to be in there's probably some grouping, some categories that you can find and I find it challenging sometimes as a designer to just come up with those categories on my own a lot of times you need to actually go to the user base and ask them to suggest some categories and if you can avoid it try and stay away from things like type category kind because those don't really mean anything maybe maybe they do in the context but if you can make it like we see main dishes right we actually know what that's describing it's not just like type it's something that said type we'd actually have to look at the data to understand what that referred to sometimes you can't avoid it but if you have a language if there is already some pre-existing jargon even that maps onto your data that allows you to help the user categorize it that's great because they already know what those categories mean and it means that they can kind of zone in on those in here we have meal type season, date added we already have the buttons at the top that are chunked for us, we have different functions new recipe, fine recipe, browse recipes shopping list that's a form of chunking and categorizing that's allowing the user to make a decision and I would limit you can't just put 20 of those across the top because now you're back to the original problem again so now if you have a really large number of options you've got to say another level above it of categorization so that I can reduce it down to a manageable number it's better to have layers than to have one set of a few items each it's better to have three levels down rather than trying to make them choose from a very long list five to seven is probably the max so we want to organize and group the data logically essentially so that we can preserve the user's mental resources like we talked about before so that when we need to ask them for a big decision they can do it and it's also just nice it just makes it nicer to use you don't have to go through an arduous process of finding what you need so that brings us to the end of the presentation we talked about some elements of design we talked about some basic techniques that you can use to apply to your designs some methods, some methods of presentation I really hope that you will take these away you will use them in your future designs and I hope that you can see that really design is based in a very grounded way and sometimes we become mystified a little bit by it but we can take a step back and look at the actual openings and the foundations of these and you can even go and look at some of your existing stuff and say okay how can I apply this maybe I need more white space maybe I should use a grid I hope you're inspired to take these away and use them, thank you very much if there's any questions please come up to the mic I'm here for a little while and also a couple of announcements as well the evaluations I believe FileMaker changed to a different method of filling out the evaluations this year and there was some kind of issue in the last couple of days with collecting the evaluations so they've asked me to mention it to you and ask if you might consider redoing the evaluations from yesterday and perhaps possibly Monday so that's one thing the other thing also is that Albert had asked me, oh he's coming up to the mic now he'd asked me to mention that he has a design, he's running a design smackdown in the far corner at the breaks and at lunch, correct? that's right, that's right, and tomorrow too okay and today and tomorrow so please go there, Albert is very very knowledgeable he'll help you and he'll actually look at your solutions which is great to get some really practical customized advice for you and Albert I took his master class in Miami a few years ago was excellent so if you have the opportunity to take that please do and if you have any questions for me while I'm walking around just let me know so Albert you have a question? I want to point out something about Fitt's law because when Bruce Todd Mazzini talks about that he says that the upper edge of a screen when you're using a mouse is basically infinitely large because you can throw your mouse up there track pad and you can reach that target of the menu bar and then you might think that when you're designing for mobile you no longer have that and it's really not true because swiping swipe left or right or scrolling is also infinitely large so in your progression of saying how big is your target how close is your target scrolling and swiping are infinitely close because wherever your fingers are you can get at it and infinitely large and so it's kind of a reversal we were saying in the past trying to put everything on the same layout you can put it out of sight and it's infinitely easy to get to the motion of scrolling and swiping and all you have to do is look at someone scrubbing through their Facebook feed to know that we really know how to scroll these days yeah that's a good point I think that in the last few years we've received some new gestures and new abilities that we may not have had before that change our interactions a little bit and I keep this simple and straightforward for people who are just new to design but Alba makes a good point in sophisticated interfaces we do some of the rules change a little bit on mobile really it's the edges like that happened and also the size I find certain applications like Twitter that those buttons are really small like I try to click into something and I end up replying or end up liking something that I didn't mean to and it's happening to me all the time but yeah the outer edges I think what you were saying is that when you scroll up with your mouse it kind of hits the top and stops there so it's almost like throwing a ball against the wall and you catch it so it provides you with muscle memory to be able to hit those edges and on mobile as well I still think that it applies even if you're scrolling through your feed you still need the buttons that are related to replying and whatever it is liking favoriting whatever to be close to the thing that actually it applies to right so it's partly about that as well is there another question I would be interested in your thoughts with regard to button bar sizing relative to specifically button bars that have hide conditions on certain buttons because as you illustrated when you change the number of buttons it doesn't change the size of the bar but it resizes those buttons so if you have a button bar for example that may have seven or eight buttons possible but due to permissions the user may see two or eight how would you suggest approaching that? Well I think you have to design so that you leave especially if you're wanting an integrated interface for everyone so you're doing one layout and you're hiding or showing things conditionally based on people's permissions then you have to design for the most number that you could possibly have because we don't mind seeing a little bit of blank space if there's only two buttons that's okay does that answer your question? Well sort of because I'm a real big fan of alignment and I've been to albert's class so that helps but I like things being aligned and if I have example a top navigation system-wide navigation to different modules for example I like things to be aligned in the rest of the UI with that I think that's easier things don't look jagged but you have less ability to maintain that if not all of those modules are always going to be available. So do you use the object anchoring? Yes but the size the width of the individual buttons will change based on how many of them are accessible. Right, if you anchor it to the right hand side Right, well it'll just stretch it though it won't maintain a fixed width So in that case maybe you use hide object when and then you show I mean I know it's a little hard because you're trying to do a universal navigation yeah I hadn't thought about that I think I have a slight idea I think one time I tried to actually just use the button bar that when you're hiding one you show another one but it's empty and it doesn't do anything I see, okay so that's a good suggestion it's still a little tricky I think it's not quite what she was hoping for she's just saying maintain the size the same no matter how many buttons are shown maybe feature requests for phone maker perhaps But I do have a question what's your advice on dealing I mean we've dealt with a lot of stuff that's sort of landscape but dealing with iPads, iPhones that are portrait and using golden rectangles in there I mean obviously we don't want to have like menu bars that take up the top section exactly do you like section it off into one golden rectangle based on the overall width and use that as a guide Yeah I mean your screens aren't going to always provide you with the opportunity to do a golden rectangle maybe they will maybe they won't I wouldn't try to be too didactic about using a golden rectangle get as close as you can we're not going to know that that's not a golden rectangle that person doesn't know what they're doing we're going to accommodate it so I would just say if you're interested in using it and it's not quite I would just get close or use the rule of thirds as long as you're using something I think really and you're applying that consistently across layout to layout and I like the golden rectangle because it gives a nice feeling of a nice meaty you know slice but you can use the rule of thirds as a little thinner but still works still in the zone compromise I mean I don't want to say well use these rules but don't use them and just compromise on everything but it's kind of what I'm saying use them as a starting experiment try see do a couple different ways and see if you like it another question yes there's a lot of concentration and talk about developing interfaces for mobile but we've also seen the increases in options in the other direction with ultra high resolution displays I use one that's 3840 by 2400 and I'm just curious any recommendations on how do you manage that I mean do you I'm certainly not going to make my interface require that so do I say oh make it go to the top left always that's to some extent a matter of taste I'm not a fan of super big screens I know a lot of designers are I find them just a bit overwhelming like I've been the last years I thought I probably have ADD you know because I just get distracted by so much and if I have a really large screen I feel like there's all this empty space there and I want to fill it but then if I fill it I get distracted I would say really choose a size whatever that size is there's the stencils in file maker in the layout mode that will give you the orange you know borders the guys to tell you what's screen size choose something and figure out where you wanted to see I kind of like things in the middle I don't like them off to the left because I find them too asymmetrical I kind of like to have them somewhere in the middle maybe at the top that's just me maybe ask also the preference of who you're designing for what they would prefer I've done a web direct I tend to anchor to the middle too because you have that problem as well where people have all different screen sizes when they come in and I find that it looks weird where you pull it and everything just stays that didn't do anything but I want my screen to be this big so I like it when it's anchored centered you know it ends like not necessarily just infinitely you know it has like a little it has a box around it so it feels symmetrical but you're still making some borders are there any other questions I have a question this may be a question with those solutions I've been asking around but if you have a layer if you have an application with lots of layouts like maybe a hundred layouts and you expand into another department you find you have to physically add a button to your button bar is there any other solution but to go through every one of those layouts and change every button bar manually or can you reference a button bar into every layout is there some solution to that? No you can't I think you can leave some blank and then add them you know later like so provision them like for future use but no there's no real work around to actually physically putting those buttons there unfortunately and is that am I the only one that's having that problem no I think it is a problem but I think it's it's the limitation of the way file maker works at the moment yeah we don't have quite that level of abstraction maybe one day yeah yes so the question is do I have any advice about cross platform funds and I'm gonna say you weren't in my session yesterday so there is if you look at the slides you'll see there's a very small number of funds that are pretty much guaranteed to work cross platform there's Arial Tahoma, Burdena, and Tribuchet that are installed on pretty much 99% of both Windows and Mac they do not render quite exactly the same typically they tend to render a little wider on PC so what I do often is I leave generous if I know it's gonna be on PC I leave generous labels because the number one complaint is the text is cut off I can't see it so it has to do with how much space you've left for the field for the text to appear inside the field label so just I always drag them and you never get enough if you create the text and you put it on the layout and you start typing file maker just gives you the end so you always have to end up dragging it out so I would say go for your widest whatever your widest like leave enough especially if you're using a wide font as well like Burdena is significantly wider than some of the other ones it's more readable at the screen especially at small sizes but it's significantly wider than everything else so if you're designing on Mac and you know it's gonna be Windows later be generous with what you have that said I mentioned yesterday also that a lot of people have Word installed so you may be able to do some fonts that are in Word already you can utilize those but it's a bit hit or miss in terms of specifying fonts that are outside of that very short list and it's a problem all over the web pretty much but I'm hoping that at some point we'll be able to increase and maybe have web fonts available to us I don't know what the solution is but it would be really really nice to be able to expand that list okay if there are no other questions then thank you very much for your time today Anna