Interface Design / Screen Size
Subtitles of the Movie
Before we start showing you how to integrate graphics from a graphics program and all the techniques to optimize their use, we need to talk about screen resolution or screen size or screen real estate or whatever you want to call it. What I'm talking about is the amount of space to have on the screen to work with. It's limited. Right now we're working with 800 by 600 and so you can see how my solution goes right up against those limitations right there. But there are a lot of considerations when you're designing your screen. You have to first go around and find out, let's say you're an in-house developer, you need to figure out what the resolutions on all the screen of the people who are going to use it. You might go around and find out that one person is using 800 by 600 resolution and another is using 1024 by 768. If you design your solution for 1024 by 768 screen, this is what it's going to look like on 800 by 600. You're going to have these scroll bars and that's going to be very unprofessional. It's going to be very difficult for that person to use it. So you want to try to design for the most common denominator. In other words, go around, talk to people, find out what they have. Maybe you can convince the guy who's on 800 by 600 that he needs to go to a higher resolution. But you have to realize, when you go to a higher resolution, you get more space on your screen but everything appears smaller so some people have difficulty reading that. That may be why they're on a lower resolution and are willing to deal with the smaller amount of space or smaller screen real estate because they can get a bigger font. So there's things you can do. You can try making the font bigger on your solutions. It's a hard thing to do. You need to make sure your research this and make sure you look at it. Make sure you make a test screen and show it to everybody. Make sure they can view this and they're comfortable with the size of the type and everything that they're looking at on the screen. If you're a commercial developer, well, then you need to determine what you need to fill up on the screen. How much space do you need? If you need 1024 by 768, well then you need to put on your box, you know, the box, the bullet points that you have to have at least 1024 by 768 to use this. If you have less to put on the screen, well, then you can go ahead and put a bullet point that says at least 800 by 600. Of course, you can solve these problems by use tabbed interfaces as we've shown you and things like that so that you can fit more information on one screen, but if you really need to have all that information on one screen without the tabs, well, then you really need to consider how much real estate you're going to use up and you really have to think about this a lot and I know I'm talking about it endlessly here, but it's really important. People often go and design their solutions, their whole interface and then discover that uh oh, well, it's not going to fit on the screen. So let's go ahead and talk abut what things you have to consider when you're designing or deciding what size a screen is. And before we do that, let's go into Layout Mode and remind you about something. You have to remember that when we resize a screen through our script step, which I'll show you in a minute here, it goes to the last object on the right and to the last part on the bottom. That's essentially, if we go back to Browse Mode, this green button right here. So if I resize it like this and then click the green button, it's going to resize to this size, exactly to that graphic and this part down here. Now, Windows doesn't have this green button but there is the script step that does this. So if we go into ScriptMaker and look at a script we have here called Lock, Zoom, Hide, we'll notice that we have a feature here that goes ahead and resizes the window. It's called Adjust Window, Resize to Fit. That will go ahead and make it to those dimensions that you design. So once you've got that down, you need to consider what other things can get in the way. There are plenty of things. You could have the toolbars. OK? You could have the status toolbar or the formatting bar. You can turn the formatting bar off through a script step, as well as the status toolbar. If we go back to that script, you'll see it in there, the Lock, Zoom, Hide and we've gone over this in the Beginner tutorial but you'll see here's the Show, Hide Status Area. So we either show it or lock it, depending on who's logging on and then you also have Allow Toolbars On or Off and that's in our open script here and you'll see it right there; goes to a Subscript here. In fact, this is where we call the Lock, Zoom, Hide from. Call Allow Toolbars here also, which we can find. And there it is right there. And you can see we turn them on or off depending on whether you have full access or not and so those are important things to consider. You can control those through scripts so you can turn them off but maybe in your design solution you want to have them show. It's up to you. But you need to consider that in your whole equation on how big of a screen you have because they will take up screen real estate at the top. Just showing the status area you can see how much real estate it takes up. Other things that you need to consider are the dock or the task bar. So the dock on Macintosh and the task bar on Windows. So I've hidden mine but it may be showing and it could be down here. And your task bar could be down here or on the left or who knows where. You need to consider that in the whole design of your solution. How much space can this possible take up? We need to make sure that no matter how big somebody has their dock or their task bar, that you can accommodate that. So make sure you think about that. Really consider it hard. Also on Windows you have a thing called a status bar, which is down here. Now, you can't control that through scripts but it'll find it under the View Menu and you will have a choice called Status Bar. You can turn that off manually but maybe you don't want it to show on anything. Maybe you want to have that extra, you know, about ten or 15 pixels. And essentially the idea behind it is when you rollover things inside the FileMaker interface, it gives you information; help information. So if you design your solution right, you really don't need the status bar because it'll be, no FileMaker interface. People really shouldn't even know it's FileMaker because you should design it so that it looks like your own solution, accomplishes just the goal that your solution needs to do. And then you also have to consider on Windows, not on the Macintosh, the application window. When you open up FileMaker on Windows, it has a window called application window and within that then you have this window you see here and so you might have that application window maximized or not maximized and depending on whether you have it maximized or not depends on whether you have scrollbars and other interface elements. So you have to consider all that. So there's a lot to think about when you're designing this size, this screen size right here. You can't just go ahead and say OK, here's the side of my screen, here's the bottom, let me pull my part down here and my graphics over there and you're done. There's a lot of things to consider when you're doing this so think about this hard. Make one layout and test it on a whole bunch of different people's screens and make sure it's going to not have scrollbars. That's the key. You don't want to have scrollbars here except maybe in a list view. That's OK. You have a scrollbar going up and down. So design one layout, test it and then you can base all of your other layouts on that one layout as you'll see as we're going to do.
Tutorial Information
| Course: | FileMaker Pro 10: Intermediate |
| Author: | John Mark Osborne |
| SKU: | 33926 |
| ISBN: | 1-935320-19-X |
| Release Date: | 2009-01-05 |
| Duration: | 15 hrs / 177 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 