2019-07-07 16:46:59 (edited by goran 2019-07-07 16:52:30)

Sighted people, being able to see, can easily design their gui applications in a manner which is presentable and visually appealing. However, I'm wondering, how do blind developpers go about this? I have struggled a lot with designing my school papers throughout my school years. I have usually gotten sighted assistance, but it can be annoying as people have different preferences, and there have been cases where asking for their opinions left me more confused. I assume that it's worse with applications, as it has the potential to be seen by more people and stay for a long time. So what do you guys use to organize your controls and such in your applications? Are there any convensions or standards  reguarding the shape, size, colour and order of the controls in an application that one can follow to give their programs a presentable look?

Thumbs up

2019-07-07 17:51:49

Hi there,
well, may be I'm not the right person to answer this, because I had been sighted for a quite long time before and thus I'm designing guis by my visual imagination, but I can tell you at least some things to follow.
It isn't very hard at all. Just keep in mind to:
1. never make things overlapping. An label going through edit field or a button is something you don't want.
2. Always make your gui regular, or at least compose it using regular parts. I mean, when you for example want to make a label for an edit field, it's fine to place it usually left from it or above it, but never above and slightly or more to the left, so you end with a some strange diagonal, the same goes for other directions. Use rectangular structure when possible, that's your best bet.

Now regarding why it's easy, nowadays technologies like WPF, or Android activity layout doesn't use absolute positioning like before, but relative instead.
That means, you specify in which position are components from each other's view, instead of one solid point. That's great for us, because you specify for example just one label to the upper left part of screen and then design everything under it. Libraries will then work out, how to place it on every display, so it looks regularly.

Another thing is, how big should components be and how far from each other. Here again goes the rule, make things regular. Too small label near a big edit looks strange, as well as big text and small field. Also objects too close to each other, with a large space around them are not usual, the opposite extreme as well.
That's why there are grids in WPF, or layouts on Android. What I have found very useful here is the ability to make percentional layouts.
For example, I want an activity with a title, view area and three buttons on the bottom.
I start with a whole screen, which I divide to three parts. the view is the most important part, so I give it 80%. The rest will be divided between heading and buttons. I want to have buttons in a bar on the bottom of screen, and will give them thus 10%. The heading will take the rest - 10%. Of course buttons should be bigger than text, however that's not a problem in this case, because 10% is just an area, with text in the center, while the most of space will be just a margin.
Next, I want to design buttons in their area. They are all equal, so i give them 33% of the bar and make just a thin margin, so it looks like a bar splitted to parts, instead of individual buttons lying one beside each other.
Using percents for this purpose, or even better fractions, makes everything imaginable even by your fingers. Just take your smartphone and use the screen as a reference - imagine 1/10 from it, then 1/3 for each button etc.
I can't tell if this would work for someone blind from his bird, I can't even imagine it, but I thing with some practice it could be possible.
May be someone who haven't been sighted before will describe it better.

Best regards


Thumbs up

2019-07-08 01:26:38 (edited by magurp244 2019-07-08 01:34:13)

The conventions often depend on the type of application, and can vary in terms of layout, presentation, utility, and artistic qualities. On the surface this might seem complicated or opaque, but its not terribly difficult to take a mathematical, geometric approach to GUI design.

Lets say, hypothetically were making an FPS. In this case you would typically have a health bar and ammo bar in one or more corners of the screen. So for sake of argument lets say you would put the health bar in the lower left, and the ammo bar in the lower right.

Let's say the size of the window is 800 by 600. Now, let's also say the health bar is 60 by 40, and the ammo bar is 40 by 40, and that the anchor point for both images is in their lower left corners.

Now, if we want to evenly place each bar in the left and right corners of the screen, we'd want a little padding so they aren't touching the borders of the window, so you'd put the health bar at [10,10]. This puts the lower left corner 10 pixels high by 10 pixels wide away from the lower left corner, nice and smooth.

Now for the ammo bar, we would put it at [(window.width - ammo_bar.width ) - 10]. Because were dealing with the lower left corner as the anchor point of the image, we would subtract the width of the image from the size of the window, minus 10 for the padding horizontally, and then position it 10 vertically, so: (window.width - ammo_bar.width ) - 10 by 10. That makes it nice and flush with the lower right corner, just like the health bar on the left.

There are other design conventions to go over though, depending on the application, such as purely artistic or a programmed interface layout. But utilizing geometry and bounding regions can help give a sense of the asthetics of placement with enough practice.

-BrushTone v1.3.3: Accessible Paint Tool
-AudiMesh3D v1.0.0: Accessible 3D Model Viewer

Thumbs up +1

2019-07-08 21:22:32

The golden cursor addon for NVDA is really useful for that too isn't it?

Buy the worlds greatest machine gun. It's about 50 inches in length, It's huge! & it can shoot really far, &, it's cheap!
Lets demonstrate this: stand still Thom...
Okay ma.aaa!
Oh! crap!

Thumbs up

2019-07-08 23:06:42

@Rastislav, despite me being blind from birth,  your tips made perfect sense and wer pretty helpful actually.
@magurp, good point. I know it depends on the type of the app like everything else, but my basic aim in asking this question was to get a general idea how much does designing an app depend on sight and how much of it is doable by blind people. thankfully the responses wer more than what I was expecting, so thanks guys.
Oh and I had seen the golden cursor addon, but havn't inspected it closely. I'll install it and see.

Thumbs up