6

I'm working on an app that has 3 elements in the nav bar:

  • a "back" button
  • the title of the screen you are currently on
  • a "logout" button, when you're logged in

Now I have some problems regarding the length of the titles. I have certain cases in which they are simply too long to show them in a way that is visually pleasing. I've attached an example: Center align

Are there any downsides to left align the title and put it beside the back button? The only problem I'd see would be that people could believe you would get back to that page that is specified and not realize, that you ARE on that page. Similar to the "old" back buttons that were used up to iOS 6.

Left align

Suggestions?

I don't want to put an ellipsis and cut it off. Would I have to reduce font size when it comes to longer titles? (Not really pleasing as well, but what is the UX perspective on that?)

Improve this question
2
  • Have you considered shorter titles? For example 'Open File: abcdefg.txt'. Would become 'Open File' and the file name itself would appear below the navigation bar, where vertical space is more flexible for wraparound and fonts can be smaller without sticking out badly. In short, page titles should not be dynamic text if you have restricted real estate.
    – Gusdor
    Aug 14, 2013 at 15:23
  • This is no option since the titles are static and they won't really change. Maybe there will be functionality added at a later time that requires new titles, but not until now. And yes, I'm aware that since the titles are static, there should be some way to shorten them, but up to this point I haven't found suitable ones.
    – Raphael Loder
    Aug 16, 2013 at 14:27

5 Answers 5

Reset to default
8

Both options you presented have drawbacks. Have you considered removing the logout button?

RemovedLogout

Other apps that I log into, such as Facebook, Twitter, and YouTube, have the logout functionality in settings. Is there a specific reason a user would need to logout functionality immediately accessible? Would users of your application need to log out frequently?

Edit: Here is an excerpt from creativebloq.com:

There's lots of white space available

With iOS 7, Apple has gone big on extolling the virtues of breathing space in providing clarity and ease of use. And the official guidelines make it clear they want designers to create apps with a sense of calm and tranquility, focus and efficiency.

This is best achieved by not cramming everything in tight together, so embrace white space and let your content breathe. As with the other considerations, Apple is leading by example here by reducing the amount of clutter in its own apps - as seen in the App Store and lost/stolen screens.

Improve this answer
3
  • Yes - the logout button is completely necessary and users have to logout after each session with this app. It is to reduce security threats + although actions are taken to have the user logout after a certain amount of time, it's still necessary to let the user feel safe that the data in this app can't be mistreated by anyone. I can't get rid off any of these items. Originally I had the title replaced with the logo throughout the app, but after some research I found that the title is a necessity I can't disregard.
    – Raphael Loder
    Aug 10, 2013 at 19:12
  • As far as the alignment of the title, the iOS 7 Human Interface Guidelines state "A navigation bar can display the title of the current screen or view, centered along its length."
    – Keiwes
    Aug 10, 2013 at 20:04
  • Yes, I'm aware of these regulations and they make perfect sense, but unfortunately, they don't work for me in this case ;) I think my best choice would be the icon, it has all the advantages. Only disadvantage could be, that it's not really distinctive up from the beginning, but the users will probably adapt. Hopefully ;)
    – Raphael Loder
    Aug 12, 2013 at 18:42
5

So, I've evaluated the answers and tried the option with the icon instead of the word and the result (as in: all the titles suit in there) would work fine now. But I'm still concerned about the familiarity of the icon and if it's appropriate even. What do you think?

Remember that the button is used every time the user uses the app.

Problem solved?

Improve this answer
3
  • I think the icon would work well with the following: 1. After the icon is selected, prompt the user with a "Logout Now?" dialogue box and 2. Have the logout functionality also available in the settings in case the icon is not recognized.
    – Keiwes
    Aug 14, 2013 at 18:31
  • 1. Of course, this method is standard. 2. That is a good idea, I'll implement that :) Thank you!
    – Raphael Loder
    Aug 16, 2013 at 14:30
  • This icon would not work well as it is pointing the same direction as the arrow on the left. Visually, they look like the same action. +1 vote for removing the logout button from the top entirely.
    – Jason
    Sep 19, 2013 at 21:04
3

I would not left align the title. The proximity of the back arrow with the title in this case gives the appearance that the arrow and title are grouped as one action and clicking either would take you back to the page referred to in the title.

Shorten the page title if possible, and if not, reduce the font size.

You should also consider using a tint color for actions in the navigation bar to help separate them from the title. A tint color should provide enough affordance for a user on what is clickable that you could drop the border around Logout to squeeze in some more pixels for the title.

Improve this answer
1
  • 1
    Yes, that was my concern as well. Shortening, as in adapting the length of the words isn't possible, at least not for me. Shortening, as in abbreviating words, could be done, but I don't feel comfortable with that solution because it seems very sloppy and unprofessional. If it were dynamic text, which would change from now and then, then I would definitely go for this solution, but the titles will remain the same throughout the app. I'd have to consider that, finding a color would be quite a challenging task, since the design is predefined by the company and white and blue are the main colors.
    – Raphael Loder
    Aug 12, 2013 at 18:39
2

How about replacing the current logout button with an icon? Since the logout function is frequently used, users will have no doubt about its meaning after using it once.

Improve this answer
1
  • That was a choice I went with before I decided on putting text rather than an icon. I found a bunch of different versions for logout icons, not really one that has become standard, AFAIK. And since it has to fit into the new iOS 7 style, they should be as minimal as possible. I looked at these icons for example, but none really stand out. Since the app has a target audience of pretty much every adult, I have to consider not very tech-savvy users as well, and I figured, words still work best. But maybe I'll find an icon that fits :)
    – Raphael Loder
    Aug 12, 2013 at 18:28
0

The only recommendation I can make is to find shorter alternatives to your titles. Tens, if not hundreds of thousands of app developers have struggled with the same issue and have found solutions.

Improve this answer
1
  • I'll redirect you to the answer I gave to Gusdor: "And yes, I'm aware that since the titles are static, there should be some way to shorten them, but up to this point I haven't found suitable ones". I'm well aware of this dire need to keep those titles short and concise, but sometimes it can't be done. I'll have to evaluate with some specialists to maybe find a way to keep 'em short :)
    – Raphael Loder
    Aug 16, 2013 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.