iOS How hard would this interface be to do?

[chizzer2003]

Hello,

I'm working as an intern at a company who need an iOS app. They have a couple of iOS developers who are fairly skilled in Objective-C and have all the underlying code in place and have already developed an app with an Apple stock interface. However, i was tasked to mock up a more interesting interface with aspects of "skeuomorphism" etc. So I used photoshop to mock up this with the help of inspiration from websites. I was just wondering, would this interface be possible to implement into the app over a course of 3-4months?

Basically the top buttons(demographics etc) control the bottom view. (The buttons act as the master view and everything below acts as the detail view). The tabs (personal, additional etc) would then flick between the file with a simple page turning animation. Is this all being a bit too ambitious? Would Apple even allow this?


Thanks in advance!

Some information is blacked out due to privacy.

 

[1458279]

I would say yes to the 3 ~ 4 months given good ObjC programmers.

I didn't see the tabs on the top (unless you mean the dark shaded ones), I see tabs on the left side, but either way the layout looks pretty good.

I don't have a clue about what apple would say about it, that seems to be somewhat random.

 

[dejo]

I would suggest putting the tab bar (i.e. the one with 'demographics', etc.) on the bottom of the screen, since that is what iOS users are accustomed to.

 

[chown33]

1. That design will never work on an iPhone or iPod touch. That may be ok for you, but you need to know that, and have it clearly known and understood by all concerned.

2. I don't think it'd be all that good on iPad in portrait orientation, either. Again, you and your customers may be ok with that, but if it's not clearly understood by all concerned, I suspect you're in for a big surprise.

3. Mock it up using HTML and CSS. If it looks fine on the iPad web browser (one reason for mocking it up), and works fine (another reason for mocking it up), then consider just making the interface be an actual UIWebView.

4. If the mockup fails horribly in testing, then you know it won't work well in the real-world (yet another reason for mockups: early failure costs less than later failure) and you can redesign accordingly. Maybe a simple change gets you a big improvement (more reasons for mockups) in usability.

The gist of all the above is you need to test it, using real-world devices, in real-world usage scenarios (like orientation and lighting), otherwise everyone's just buying a pig in a poke.

Skeuomorphism is a style of design, not a guarantor of usable designs.

EDIT
Oh wow, I didn't even see the "top buttons", they were so small and low contrast (Demographics, Family, Health, Education). That's a poor design, especially since you have lots of usable space around the labels in all directions. The uneven spacing of the top buttons is also weird; it makes them seem unbutton-like, so less likely to be tappable.

 

[dejo]

I'm also curious what the design that the developers created using stock UI elements looks like.

 

[Duncan C]

Hello,

I'm working as an intern at a company who need an iOS app. They have a couple of iOS developers who are fairly skilled in Objective-C and have all the underlying code in place and have already developed an app with an Apple stock interface. However, i was tasked to mock up a more interesting interface with aspects of "skeuomorphism" etc. So I used photoshop to mock up this with the help of inspiration from websites. I was just wondering, would this interface be possible to implement into the app over a course of 3-4months?

Basically the top buttons(demographics etc) control the bottom view. (The buttons act as the master view and everything below acts as the detail view). The tabs (personal, additional etc) would then flick between the file with a simple page turning animation. Is this all being a bit too ambitious? Would Apple even allow this?


Thanks in advance!

Some information is blacked out due to privacy.

View attachment 350037

When you mock up for iPad in PS, do it at 1024 x 768 pixels. That is the resolution you have to work with on iPad. Also remember that finger touches are not as precise as mouse clicks. You need bigger UI elements so users can tap them with their fingers.

My gut is that your mockup is too complex for the relatively small screen of the iPad. Also, you should really stick with standard iOS controls. iPad users are trained to know how they work, so they don't fumble around trying to learn something new. Don't do new controls just for the hell of it. Only create a new user interface element if you are really adding a new function, and after a lot of thought on ways to do it with existing UI elements.

 

[MattInOz]

Not sure how hard it would be but from a design perspective I don't really get what the user flow would be.
Have you had a chance to observe how the people working with the data use it now?

In this view I don't get a sense of where their focus would be or what the task at hand is. Then there is the question where would they move to after completing that task. Is the App purely data viewer is the user entering data, then how does the entry field slide to allow for the keyboard, it all feels like it should be very ridged on screen.
Why are the top tabs different from the side ones?
Does the user really need quick access to both?
Is accidentally tapping one going to pull the user out the context they are need to be in?
Are they using it with a client?
So the frustrations of your app start to reflect poorly on them as professionals.

You don't want to invest 3-4months into something and get to the end and no one thinks it's good.

 

[chown33]

You don't want to invest 3-4months into something and get to the end and no one thinks it's good.

Worse, it could be demonstrably inferior in usability. As in, it may be that anyone using the older interface consistently makes less mistakes, finds information more easily, and produces results more quickly.

 

[chizzer2003]

I understand your concern, however this app is specifically designed for customers trained how to use a very similar app on a desktop client, so the layouts had to be familiar and consistent. I've done a lot of user testing on usability with touch point and application structure, so I don't think that is too much of a problem. But thank you guys anyway. But I'll definitely boost the contrast of those top tabs!

 

[jnoxx]

Who is talking about 3/4 months, wow.. It's basically all images on XIB's and just fill in outlets per view.. Make your own tabbarcontroller logic when pressing the tabs. I've done nearly same with another project (i can show screenshots), and just creating the logic + basic setup took me 12 hours, then making all the viewControllers that respond to the logic + modelling the database another 6 hours, if you taken into account the buttons need to animate on the left side to bigger buttons etc, i'd charge another 4 hours for more small little fun animations. (just my opinion as experienced iOS dev)

 

[dejo]

Make your own tabbarcontroller logic when pressing the tabs. I've done nearly same with another project (i can show screenshots)...

So, were you using UITabBarController or did you create a whole new class that worked the same? And yes, screenshots please!

...modelling the database another 6 hours

I think I would need a lot more info on how complicated the database design is in order to estimate the time to build the model layer for this.

 

[PhoneyDeveloper]

Obviously you have to click the image to see all the details.

This design resembles in some ways the iPad Epicurious app, which has custom tabs and is quite nice to use. I assume that the double set of tabs means that there is a huge amount of info that can be displayed. Does every single tab along the top also have all those tabs on the left? That would amount to 7x9 = 63 different screens. I would guess there really fewer than that.

It might be possible to implement this as an iPad-Landscape only app, which would simplify the coding a lot. If you also wanted iPad-Portrait you might need the data views to be able to scroll. I think you'd have trouble with iPhone due to the more limited screen-space. Otherwise I would have no real complaints about the layout that you show.

How long it would take would depend on how many screens there really are and how different they are from one another.

 

[chizzer2003]

Obviously you have to click the image to see all the details.

This design resembles in some ways the iPad Epicurious app, which has custom tabs and is quite nice to use. I assume that the double set of tabs means that there is a huge amount of info that can be displayed. Does every single tab along the top also have all those tabs on the left? That would amount to 7x9 = 63 different screens. I would guess there really fewer than that.

It might be possible to implement this as an iPad-Landscape only app, which would simplify the coding a lot. If you also wanted iPad-Portrait you might need the data views to be able to scroll. I think you'd have trouble with iPhone due to the more limited screen-space. Otherwise I would have no real complaints about the layout that you show.

How long it would take would depend on how many screens there really are and how different they are from one another.

It's actually a draft database for a branch of one of the largest companies in the world of whom, due to NDA, I cannot name. It is a HUGE database of information, one of the largest in the UK for a "particular" industry of which, again, I cannot name. But I think landscape only is the way to go.

 

[jnoxx]

So, were you using UITabBarController or did you create a whole new class that worked the same? And yes, screenshots please!


I think I would need a lot more info on how complicated the database design is in order to estimate the time to build the model layer for this.

Hey Dejo,

the OP requested screenshots via PM, but i'll put them here. I filtered out the logo for NDA purposes (I guess you understand..) ->
http://cl.ly/image/3m0v3N3c1O0L
So on the left, there is a menu, that has the same logic as a Tabbar, when you click on it, a viewController get's generated on the right and animates in, when you click another, it will check if it has a viewController on the detailview, animates that under the menu, and animates a new one in from the right
On the right side I made my own custom navigation with animating buttons (I love programming animating stuffies).
Everything is hand made, I only used NSObjects/Categories and subclasses. Nothing to fancy.

So, I hope that helped?

About the database, that was indeed a wild guess, but just the basic setup and laying out the modelling, it was a first "alpha" guess for 6 hours, could be alot more, or alot less ^_- that's why I said, it's a personal opinion.

 

[dejo]

the OP requested screenshots via PM, but i'll put them here. I filtered out the logo for NDA purposes (I guess you understand..) ->
http://cl.ly/image/3m0v3N3c1O0L
So on the left, there is a menu, that has the same logic as a Tabbar, when you click on it, a viewController get's generated on the right and animates in, when you click another, it will check if it has a viewController on the detailview, animates that under the menu, and animates a new one in from the right
On the right side I made my own custom navigation with animating buttons (I love programming animating stuffies).
Everything is hand made, I only used NSObjects/Categories and subclasses. Nothing to fancy.

So, I hope that helped?

It does. Thanks. Looks like a heavily-customized split-view, but I'm sure you had a good reason to roll your own.

 

[jnoxx]

It does. Thanks. Looks like a heavily-customized split-view, but I'm sure you had a good reason to roll your own.

Hey Dejo, Yeah, I didn't like the standard UISplitview since you normally via iOS guidelines have to have it as first view, which I didn't want.
the reason why I wanted my own one is to customize all the animations heavily.
After the project is done, i'm opensourcing everything I programmed & will post it here ofcourse