Scribd
Upload
2 views

Lecture-3

The lecture by Dr. Mohamed Saied Amer focuses on essential tips for improving user interface (UI) design, emphasizing the importance of user standards, attention to critical buttons, and effective use of icons and headers. Key recommendations include simplifying navigation, using appropriate graphics and font sizes, and ensuring visual contrast in content. The conclusion highlights the complexity of creating a user-friendly experience and the necessity of usability testing.

Uploaded by

ayabahaa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lecture-3

The lecture by Dr. Mohamed Saied Amer focuses on essential tips for improving user interface (UI) design, emphasizing the importance of user standards, attention to critical buttons, and effective use of icons and headers. Key recommendations include simplifying navigation, using appropriate graphics and font sizes, and ensuring visual contrast in content. The conclusion highlights the complexity of creating a user-friendly experience and the necessity of usability testing.

Uploaded by

ayabahaa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Lecture 3:

Tips for a Better UI design


User Interface Design
Dr. Mohamed Saied Amer
Outlines

User standards
Attention to important buttons
Using icons
Using headers
Use message boxes
Use radio button and combo boxes
Use navigation controllers
Using fonts, colors and other related things
Use Standards

The standards include everything from the layout of controls


in a particular manner on the dialog boxes, like:
The OK and Cancel buttons,
The user interface's shape—rounded corners of the top of the
window as in Windows XP dialogs.
Styles of icons.
Styles of any other graphics.
Interactive behavior of your application.
Draw Attention to Important Buttons

Sometimes you need to direct the user to the


most important buttons even when you have
four or five other buttons lying around it.
First, convert the other non-critical buttons
into LinkLabels as shown in figure. This way,
the user knows that these links will perform a
task, but their attention will go first to the
button that stands out.
Second is to put the critical button first in line.
The recommended option is to set to receive
focus by default.
Simplify Recognition with Icons

Icons—especially the Windows and Office icons and toolbar


bitmaps—help speed up recognition of the UI and the task the
user has to perform.
Choosing the right icon is also important. Microsoft provides
many standard graphics as part of Visual Studio.
If you create your own icons, it is highly recommended that you
follow the operating system-level or application-level standards
for these graphics as mentioned in the Use Standards above.
Simplify Recognition with Headers

Headers are the perfect way to explain the entire dialog in a single
sentence.
Headers work more effectively than normal description labels
because they are the first thing that a user sees when the dialog
pops up.
There a few things you should keep in mind when designing
headers:
Make sure the background color is different.
If possible, keep your header's height under 150 pixels.
If you have a title label with a font over 10 pt in size, use Arial, or Franklin
Gothic Medium.
Use Custom Message Boxes

When you have to ask your user a question that can't be answered with
a simple yes/no or OK/cancel, it becomes complicated.
The Microsoft .NET Framework makes it easy to implement custom
dialogs.
You can use all DialogResult members. These same options are used
by the standard MessageBox.Show method.
Alternatively, you can just set the dialog's AcceptButton property to
btnOK, and the CancelButton property to btnCancel.
RadioButtons or ComboBoxes?

The ComboBox list takes more time to render on


screen rather than Radiobuttons.
The ComboBox list did not take a lot of space like
Radiobuttons.
Sometimes it is better to use RadioButtons,
especially if you have 4 choices or less.
Simplify Navigation with Breadcrumb Controls
and Sidebars
"Sub-navigation" is the key to complex UI.
Sometimes you can't escape having a complicated
UI.
The best thing to do in such a situation is to make the
experience as easy as possible for the user.
A sidebar consisting of link labels, or a TreeView for
hierarchy-based navigation, suggests a sibling level
navigation for the current dialog's task.
Breadcrumb navigation can be easily merged into the
header if the form has one.
Use Pretty Graphics

Everyone loves applications with cool graphics.


A professionally designed splash screen or a header (like
the one we talked about earlier) does the trick.
Always make a point to use professionally designed
graphics.
For small graphics, you can always go for the icons and
bitmaps that ship with Visual Studio.
Don’t use pure black as background
Using pure black as a background can often create
a jarring effect that feels unnatural.
Instead, it’s recommended to use a near-black color
like #0F0F0F for creating a more natural and
aesthetically pleasing background.
This colour can be especially useful when
designing dark mode user interfaces.
Use even spacing

One effective technique is to use


multiples of 8 for the spacing between
elements.
This is because most developers use
eight-point grids to structure their
designs, reducing the likelihood of errors
and streamlining the development
process.
Use Ideal font size for content

Choosing the right font size is a


crucial aspect of designing a
user-friendly interface.
When it comes to setting the font size
for paragraphs, an ideal size is 16
pixels.
This font size strikes a balance
between legibility and readability.
Use suitable padding for button

Double the value of the vertical


padding for the horizontal padding.
looks perfect.
Above example, the button has 12px
vertical padding (top, bottom) and 24px
horizontal padding (right, left).
Visual contrast in content

By using different styles and colours, you


can create a hierarchy of information,
making it easier for users to scan and
understand the content.
For instance, using bold and larger font
sizes for headings can draw attention to
important information, while using a
lighter or smaller font size for the tagline
and content can help create a sense of
continuity and flow
When to use Upper case

Uppercase letters have a


stronger visual impact than
lowercase.
Consider using uppercase letters
for tags, statuses, and other
similar elements to create a
clean and precise look that
stands out from other elements,
while keeping in mind the
overall visual balance of the
design.
Using gradient

It’s important to keep in mind that most UI


elements are square in shape.
Therefore, using radial gradient backgrounds
can sometimes look out of place or unbalanced
in the design.
Instead, it’s generally a better idea to use linear
gradient backgrounds, which can help to create
a sense of depth and contrast in the design
Do Not Forget the Little Things

The little things can annoy you, but ignoring them can
impact the impression you make.
These kinds of "little things" are the core of the overall
impression. Your application's UI and UX are what users
will judge your application.
If they see obvious bugs in your UI, they may perceive
your application to be less powerful and effective.
Which is better? Why?
Conclusion

We have only touched upon a small portion human user


experience. As the user experience becomes simpler,
effective, fun, and more user friendly, the task of creating
that user experience becomes that much more complex.
The best way to create the perfect user experience is to do
usability testing targeted especially at the UI—whether with
a special test group or by yourself.
Thanks
Any questions?

You might also like