Link icon obscures components at small sizes


#1

I decided to design an iPhone app I’m working on at 1 to 1 size, because that’s generally a good idea.

However, some of the components I’m using link to other mockups, and I’ve noticed for the first time that they can get in the way quite a lot at such small sizes:

I need three links because there are three objects there that the user might click on. You can see in the second example that the link arrow covers up the icon entirely!

I suppose one solution is to group up the elements and then just link the group?

However, I’m wondering if you could look at addressing this for those people who do not use groups very often, such as myself.


#2

Hi @ahobday,

Sorry for the hassle with this.

I assume that all your links are pointing out to the same mockup, right?
In this case, yes, grouping the controls and linking the group is a nice way of doing it.

Here an alternative solution for you: I see that you seem to use three different controls (Icon, Label and Rectangle?). Instead, you could use:

  • an Icon and Label control and a Rectangle

    or
  • maybe even better: a Button control in which you add the desired icon

Using one of these methods, your icon will be clickable when using the Full Screen Presentation mode or an exported PDF but it won’t be covered by the pink link hint.

Hope this helps! :slight_smile:


#3

I didn’t know about/notice the “Add icon to button” section, so that’s very useful! I tried it out, however, and I’ve noticed that the icon doesn’t align with the text very well:

I’d want the icon centre and the text centre to be aligned, but I think Mockups has some problems in general with aligning icons and text. So I’d probably avoid using this technique in the future just because it would clash with my need to have everything nicely lined up!


#4

Sorry about that one @ahobday.

Alignment can get a bit tricky because it depends on multiple factors that we can’t control. One of them if that the baseline and alignment of icons are handled by Font Awesome, since we use theirs set in Mockups. Another one is that it depends on the font used (e.g. the font you are using is not the default one).

We’ll keep work on reducing the pain here, but I just wanted to share the reasons.